Home Forums Themes Support Claue Change CSS Preloader

Tagged: 

Viewing 3 reply threads
  • Author
    Posts
    • #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 CSS preloader image

      thanks

    • #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

    • #19048

      thanks for quick response

      the attachment file is missing 🙂

    • #19053

      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

Viewing 3 reply threads

You must be logged in to reply to this topic.