Change CSS Preloader

[agop]

Hello & congrats on an excellent theme!

Want to change the Claue CSS Preloader (straight line) to the CSS animation as shown on themeforest on the Claue theme (the circular CSS animation)

if you could kindly provide the code needed,

attaching image 

thanks

[Harry]

Hi,

Thank you for your kind words!

Please download attach file and extract to claue-child

And add new code to style.css in claue-child

.preloader.pf {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
    z-index: 999;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

.preloader .loader1 {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #56cfe1;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
.preloader .loader1:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #56cfe1;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
    background: transparent;
}
.preloader .loader1:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #56cfe1;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[agop]

thanks for quick response

the attachment file is missing 🙂

[Harry]

Hi,

Sorry for miss attach file.

Please download the new.

Have a nice day!

Attachments:

You must be logged in to view attached files.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts