Hey Folks!

During March of 2020, and possibly April, answers may be delayed more than it usually happens. This is caused by my personal situation that requires a lot of time from me to be dedicated elsewhere, and also because of the local things that are happening currently cause of the all things connected to "Corona Virus".

Please be patient, all answers are coming as soon as possible, even if I have to stay late at night :-)

Sorry for any inconvenience.

Air.
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,288
    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!