Simple Loader Animation with CSS

#beginners #css #webdev #tutorial

Hello everyone, In this article we are going to create Loading Animation with the use of simple CSS.

Take a look of what we are designing

HTML

It's the simplest part of this project.

<body>
    <div class="loader"></div>
</body>

That's it for HTML.

CSS

To align the loader in center

 body{
            display: grid;
            place-items: center;
            height: 90vh;
        }

Now styling the Loader

        .loader {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}

Now adding keyframes to animate the loader


@keyframes spin {
  0% { transform: rotate(0deg);
       border-top: 10px solid blue;
}
    25%{transform: rotate(90deg);
        border-top: 10px solid green;

    }
    50%{transform: rotate(180deg);
        border-top: 10px solid yellow;
    }
    75%{transform: rotate(270deg);
        border-top: 10px solid red;
    }

  100% { transform: rotate(360deg);
        border-top: 10px solid blue;    
}
}