M/s VIKASH TECH - We Write Imaginations to Codes..!!

Animated Gradient Shiny Loader with HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Gradient Shiny Loader or Preloader in HTML CSS & JavaScript. E
Preloaders are what you inspect on the screen while the rest of the page’s content is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

At first, this loader is in the initial stage, where there is a loader and 0% text or number at the center on the webpage. But when you click on that center text or number, the loader will be activated and it starts to rotates as well as the center percentage also starts to increase from 0% to 100%. When it completed 100%, the loader stops to rotating.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By Praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Gradient Ring or Loader</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="outer">
</div>
<div class="inner">
      <span>0%</span>
    </div>
<!-- This is Javascript Code -->
    <script>
      let outer = document.querySelector(".outer");
      let inner = document.querySelector(".inner");
      let percent = document.querySelector("span");
      let count = 0;
      inner.addEventListener('click', function(){
        let loading = setInterval(function(){
          if(count == 100){
            outer.classList.remove("active-loader");
            outer.classList.add("active-loader-2");
            clearInterval();
          }else{
            count = count + 1;
            percent.textContent = count + '%';
            outer.classList.add("active-loader");
          }
        },200);
      });
    </script>


    <!-- This is Jquery Code you can use this code also
      instead of Javascript Code -->
      <!-- <script>
        $(document).ready(function(){
          var count = 0;
          $('.inner').click(function(){
            setInterval(function(){
              if(count == 100){
                $('.outer').remove('active');
                $('.outer').addClass('active2');
                clearInterval();
              }else{
                count = count + 1;
                $('span').text(count + '%');
                $('.outer').addClass('active');
              }
            }, 200);
          });
        });
      </script> -->

  </body>
</html>

CSS

html,body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  background: #240f52;
  overflow: hidden;
}
.outer{
  height: 300px;
  width: 300px;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  border-radius: 50%;
}
.inner{
  position: absolute;
  width: 275px;
  height: 275px;
  text-align: center;
  line-height: 275px;
  background: #240f52;
  border-radius: 50%;
  cursor: default;
  /* opacity: 0; */
}
.inner span{
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
}
.outer.active-loader{
  animation: rotate 2s ease infinite;
}
@keyframes rotate {
  to{
    transform: rotate(360deg);
  }
}
.outer.active-loader-2{
  animation: rotate2 3s ease;
}
@keyframes rotate2 {
  to{
    transform: rotate(360deg);
  }
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: