Anjan Dutta

How to create a animated rotating loader in html and css

How to create a animated rotating loader in html and css

Created On: 16/09/2021

You can create a rotating loader using a very basic CSS code.

For a container we will use a div and fit it to the height and width of the browser window.

Then we will place the loader div in the center of the window and apply CSS transform to rotate it.

See the working code belo for the rotating css only loader.

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

The CSS code is below.

.loading {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loader {
        border: 8px solid #ffffff; 
        border-top: 8px solid #009639;
        border-right: 8px solid #009639;
        border-bottom: 8px solid #009639;
        border-radius: 70%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
}

This is how we will be manipulating the border property of a div to create a rotating animated loader in HTML and CSS.

Prev

Next