Loading Spinner / Animation

[d_enajetic]

Hello All,
Quick and Simple question for you. I’m not sure if this is the proper term, but I’m calling it the Spinner as it’s named in Revolution Slider. The 4 dots that loop from left to right when a VC element is loading. Is there a way to edit that? Since I’ve changed the colors of my site, it’s no longer visible. I just want to show something is happening on that page in case it’s slow to load.

Thanks

[Radu]

Hi,

Where i can view the loader in action ? URL please

Cheers

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[d_enajetic]

This reply has been set as private.

[Radu]

Hi,

From example in this page : http://computermusicacademy.com/tutorials/ / http://computermusicacademy.com/reviews/ i cannot see any loader and this page doesen’t have rev slider in it.

Please provide more details

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[d_enajetic]

Hi again, Radu.
I wasn’t speaking on a Revolution slider. I used the term Spinner because that’s what it’s called IN the Revolution Slider. I’m speaking on the “spinner” that shows when a VC element is loading in the Kleo Theme. As you saw on those pages, I have Custom Post Grids installed. When you load the page the “spinner” for the Post Grid normally shows while it’s loading the data for that grid. Since I’ve change the color of the theme, I can longer see it and would like to edit the color if possible. That’s all.

[Radu]

Hi,

Please add these css’s into your wp-content/themes/kleo-child/style.css

COPY CODE

.vc_grid-loading,
.vc_grid-loading:after,
.vc_grid-loading:before {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out
}

.vc_grid-loading:before {
    left: -20px
}

.vc_grid-loading:after {
    left: 20px;
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

.vc_grid-loading:after,
.vc_grid-loading:before {
    content: '';
    position: absolute;
    top: 0
}

@-webkit-keyframes load7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em rgba(51, 51, 51, .75)
    }
    40% {
        box-shadow: 0 2.5em 0 0 rgba(51, 51, 51, .75)
    }
}

@keyframes load7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em rgba(51, 51, 51, .75)
    }
    40% {
        box-shadow: 0 2.5em 0 0 rgba(51, 51, 51, .75)
    }
}

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts