Loading bar is displayed beside images

1 Views

I bought a new design for my portfolio. Site is located at: abconlinesolutions.com
In it, I have edited some of the contents.

When you click “Portfolio”, it displays a loading image at the center and loads some contents (images in boxes that will open in Lightbox style upon clicked) after that. Above that there is some menus saying “GPT SItes”, “Personal Sites”, etc.. So when one of these buttons is clicked, that same loader image is displayed. But it is displayed behind the boxes of images.

Read More

How can I make it to front (not behind the boxes, which makes the animation visible to the users)?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. the preloader item is a background image on the “cascade-window” element. On that element there is a class added called “cascade-window-prealoder”. This class is responsible for showing the background image.

    Add this to your CSS file:

    .cascade_dark div.cascade div.cascade-window.cascade-window-prealoder:after {
    display:block;
    width: 40px;
    height: 40px;
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color:#fff;
    background-image:url('images/dark/preloader.gif');
    z-index: 100;
}

    And then uncomment the background-image property from this rule:

    .cascade_dark div.cascade div.cascade-window.cascade-window-prealoder {
    /**background-image:url('images/dark/preloader.gif');**/
}

    When you do that you will notice that there is a background color on loader gif. Probably you will have to replace the gif with a transparent one