Loader with Loading Complete Sign Using HTML and CSS

HTML

CSS

Output

HTML Copied

CSS Copied

.mainHeading {
      color: #fff;
      text-align: center;
      margin-bottom: 10rem;
    }

* {
      margin: 0;
      padding: 0;
    }

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

@property --loaderDiv_l0 {
      syntax: "<percentage>";
      initial-value: 0%;
      inherits: false;
    }

@property --loaderDiv_l1 {
      syntax: "<percentage>";
      initial-value: 0%;
      inherits: false;
    }

.loaderDiv {
      /*Since it's gonna be mainCircle, width and height are the same.*/
      --width: 64px;
      position: absolute;
      left: calc(50% - calc(var(--width) / 2));
      top: calc(50% - calc(var(--width) / 2));
      perspective: 1000px;
    }

.loaderDiv-done {
      position: absolute;
      display: none;
      border-top: 3px solid #fff;
      border-left: 3px solid #fff;
      border-top-left-radius: 3px;
      width: calc(var(--width) / 6);
      height: calc(var(--width) / 3);
      top: calc(var(--width) / 2 - 15px);
      left: calc(var(--width) / 2 - 7px);
      transform: rotateZ(220deg);
      animation: loaderDivFadeIn .6s;
    }

.mainCircle {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--width);
      height: var(--width);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

.mainCircle::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      padding: 3px;
      border-radius: 100%;
      background: linear-gradient(45deg,
          lime 0%,
          blue var(--loaderDiv_l0),
          lime var(--loaderDiv_l1),
          blue 100%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;

}

.mainCircle.c1 {
      animation: rx 2s infinite, gradientMove 1s infinite;
    }

.mainCircle.c2 {
      animation: ry 1s infinite, gradientMove .5s infinite;
    }

.mainCircle.c3 {
      animation: rz 1.5s infinite, gradientMove .75s infinite;
    }

.loaderDiv.done .mainCircle.c1,
    .loaderDiv.done .mainCircle.c2,
    .loaderDiv.done .mainCircle.c3 {
      animation: rfinal .5s;
    }

.loaderDiv.done .loaderDiv-done {
      display: block;
    }

@keyframes rx {
      from {}

50% {
        opacity: .6;
      }

100% {
        transform: rotateZ(360deg) rotateX(180deg);
      }
    }

@keyframes ry {
      from {}

60% {
        filter: blur(1px);
        opacity: .4;
      }

100% {
        transform: rotateZ(180deg) rotateY(180deg);
      }
    }

@keyframes rz {
      from {}

40% {
        filter: blur(1px);
        opacity: .8;
      }

100% {
        transform: rotateZ(180deg) rotateY(-180deg);
      }
    }

@keyframes loaderDivFadeIn {
      0% {
        opacity: 0;
      }

100% {
        opacity: 1;
      }
    }

@keyframes gradientMove {
      0% {
        --button_b: 0%;
        --button_b_out: 0%;
      }

33% {
        --button_b: 100%;
        --button_b_out: 0%;
      }

99% {
        --button_b: 100%;
        --button_b_out: 100%;
      }

100% {
        --button_b: 0%;
        --button_b_out: 0%;
      }
    }

Loader with Loading Complete Sign Using HTML and CSS

JS /* you can use your own js to add done class in .loaderDiv class */ setTimeout(() => document.querySelector('.loaderDiv').classList.add('done'), 4000); Copied

Output

JS Copied