How to create Pre-Loader / Spinner only using Html & CSS | Awesome Spinner

In this video i will teach you, how to create loader using HTML and CSS ONLY. How to create Awesome Loaders in html and css.

How to create Pre-Loader / Spinner only using Html & CSS | Awesome Spinner / Loader html css (2020)

Spinner Loading in HTML & CSS

HTML

                            
                                <!DOCTYPE html>
<html>

<head>
  <title>Pre-Loader or Spinners in HTML and CSS</title>
</head>

<body>
  <svg class="loader" viewBox="0 0 24 24">
    <circle class="loader-value" cx="12" cy="12" r="10" />
    <circle class="loader-value" cx="12" cy="12" r="10" />
    <circle class="loader-value" cx="12" cy="12" r="10" />
    <circle class="loader-value" cx="12" cy="12" r="10" />
    <circle class="loader-value" cx="12" cy="12" r="10" />
    <circle class="loader-value" cx="12" cy="12" r="10" />
  </svg>
</body>

</html>

CSS

                            
                                body {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: #eee;
  }
  
  .loader {
    padding: 1rem;
    max-width: 60px;
    width: 100%;
    animation: loader-turn 1s linear infinite;
  }

  @keyframes loader-turn {
    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(720deg);
    }
  }

  .loader-value {
    fill: none;
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    stroke-linecap: round;
    stroke-width: 4;
    animation: loader-stroke 6s linear infinite;
  }

  .loader-value:nth-child(1) {
    stroke: orange;
  }

  .loader-value:nth-child(2) {
    stroke: chocolate;
    animation-delay: 1s;
  }

  .loader-value:nth-child(3) {
    stroke: crimson;
    animation-delay: 2s;
  }

  .loader-value:nth-child(4) {
    stroke: pink;
    animation-delay: 3s;
  }

  .loader-value:nth-child(5) {
    stroke: skyblue;
    animation-delay: 4s;
  }

  .loader-value:nth-child(6) {
    stroke: blue;
    animation-delay: 5s;
  }

  @keyframes loader-stroke {
    8.3% {
      stroke-dashoffset: 0;
    }

    16.7%,
    100% {
      stroke-dashoffset: 63;
    }
  }

Conclusion

Download Code Files