Blog / General

M/s VIKASH TECH - Color Changing Shiny Loader using HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Color Changing Shiny Loader using only HTML & CSS. Preloaders (also known as loaders) are what you see o

September 19, 2022 · 2 min read

Hello readers, Today in this blog you'll learn how to create a Color Changing Shiny Loader using only HTML & CSS.
Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page contents is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.
This loader rotates 360deg clockwise. At that meantime of rotating it changes their color to blue, orange, yellow, and green. That means when it completed rotates 90deg it's color change blue to orange and when it completed rotates 180deg it's color change orange to yellow and when it completed rotates 360deg it's color change yellow to green. The center "loading..." text smoothly fade out and fade in when the loader is 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>Loading Animation</title> 
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="center">
      <div class="ring">
</div>
<span>loading...</span>
    </div>
</body>
</html>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: montserrat;
  background: black;
}
.center{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.ring{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: ring 2s linear infinite;
}
@keyframes ring {
  0%{
    transform: rotate(0deg);
    box-shadow: 1px 5px 2px #e65c00;
  }
  50%{
    transform: rotate(180deg);
    box-shadow: 1px 5px 2px #18b201;
  }
  100%{
    transform: rotate(360deg);
    box-shadow: 1px 5px 2px #0456c8;
  }
}
.ring:before{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,.3);
}
span{
  color: #737373;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 200px;
  animation: text 3s ease-in-out infinite;
}
@keyframes text {
  50%{
    color: black;
  }
}

M/s VIKASH TECH - Color Changing Shiny Loader using HTML & CSS

Vikash Mishra