Loader with Loading Complete Sign Using HTML and CSS

HTML

CSS

.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%;
      }
    }

Ui Code Snippets

Loader with Loading Complete Sign Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Loader with Loading Complete Sign Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course