Loader with Multi Color Animation Using HTML and CSS

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loader with Multi Color Animation Using HTML and CSS</title>

</head>

<body>
  <section class="mainSection">
    <h1 class="mainHeading">Loader with Multi Color Animation Using HTML and CSS</h1>
    <div class="loaderMainDiv">
      <div class="eachDot" style="--i:0;"></div>
      <div class="eachDot" style="--i:1;"></div>
      <div class="eachDot" style="--i:2;"></div>
      <div class="eachDot" style="--i:3;"></div>
      <div class="eachDot" style="--i:4;"></div>
      <div class="eachDot" style="--i:5;"></div>
      <div class="eachDot" style="--i:6;"></div>
      <div class="eachDot" style="--i:7;"></div>
      <div class="eachDot" style="--i:8;"></div>
      <div class="eachDot" style="--i:9;"></div>
    </div>
    <h2>Loading...</h2>
    <div class="loaderMainDiv">
      <div class="eachDot" style="--i:0;"></div>
      <div class="eachDot" style="--i:1;"></div>
      <div class="eachDot" style="--i:2;"></div>
      <div class="eachDot" style="--i:3;"></div>
      <div class="eachDot" style="--i:4;"></div>
      <div class="eachDot" style="--i:5;"></div>
      <div class="eachDot" style="--i:6;"></div>
      <div class="eachDot" style="--i:7;"></div>
      <div class="eachDot" style="--i:8;"></div>
      <div class="eachDot" style="--i:9;"></div>
    </div>
  </section>
</body>

</html>

CSS Copied

.mainHeading {
      color: #fff;
      text-align: center;
      padding: 3rem;
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.mainSection {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #001300;
      animation: changeColor 5s linear infinite;
    }

@keyframes changeColor {
      0% {
        filter: hue-rotate(0deg);
      }

100% {
        filter: hue-rotate(360deg);
      }
    }

.mainSection h2 {
      color: #00ff0a;
      font-family: consolas;
      font-weight: 300;
      letter-spacing: 10px;
    }

.mainSection .loaderMainDiv {
      position: relative;
      display: flex;
    }

.mainSection .loaderMainDiv .eachDot {
      position: relative;
      display: block;
      width: 20px;
      height: 20px;
      background: #00ff0a;
      box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;
      margin: 20px 10px;
      transform: scale(0.1);
      border-radius: 50%;
      animation: animateDot 2s linear calc(0.1s * var(--i)) infinite;
    }

.mainSection .loaderMainDiv:last-child .eachDot {
      animation-delay: calc(-0.1s * var(--i));
    }

@keyframes animateDot {
      0% {
        transform: scale(0.1);
      }

10% {
        transform: scale(1);
      }

50%,
      100% {
        transform: scale(0.1);
      }
    }

Loader with Multi Color Animation Using HTML and CSS

JS Copied

Output