Home › Forums › Themes Support › Claue › Change CSS Preloader
Tagged: preloader
- This topic has 3 replies, 2 voices, and was last updated 6 years, 7 months ago by Harry.
Viewing 3 reply threads
-
AuthorPosts
-
-
April 12, 2018 at 6:34 pm #19033
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
-
April 12, 2018 at 11:16 pm #19038
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 -
April 13, 2018 at 1:46 pm #19048
thanks for quick response
the attachment file is missing 🙂
-
April 13, 2018 at 10:11 pm #19053
-
-
AuthorPosts
Viewing 3 reply threads
You must be logged in to reply to this topic.