Before you ask please READ THIS

Visual Composer Grid loading color

How can I change the loading icon that appears when grids are loading. Right now it is a light gray loading circles, and users can barley see it, and just think the page is blank and leave before the page fully loads.

If you go to this page, it has the loading icon http://www.extremenazarene.org/all-trips
This is the element, but I can't figure out what css to tweak to change the color: "vc_grid-loading"

This video for visual composer shows "Progress Bar background color", but that is removed from the blame theme.

Any direction to how to change the loading circle colors to something more significant would be really helpful.

Comments

  • AirAir
    Posts: 10,467
    Hello:-)

    I am not sure if overwriting animations in CSS is possible but first try this

    @-webkit-keyframes load7 {
    0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
    }
    40% {
    box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
    }
    }
    @keyframes load7 {
    0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
    }
    40% {
    box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
    }
    }
    Change these colors, and put above code in custom CSS.

    If it wont work then you will have to rename all load7 to something else, for example jkellerer-load7, put in custom CSS and also add such thing then

    .vc_grid-loading,
    .vc_grid-loading:after,
    .vc_grid-loading:before{
    -webkit-animation:jkellerer-load7 1.8s infinite ease-in-out;
    animation:jkellerer-load7 1.8s infinite ease-in-out
    }
    Please try it.

    With kind regards.
  • overwriting the animation worked great! Thank you.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!