Animated Loader

Introduction

Here we are creating the Css loader with the help of HTML and CSS. This is going to be beautiful, attractive to the user, and will give a better look to your website. This loader will be used when we have to wait to load something on our website.

Now lets start making the animated loader without our time. This will not be very complicated to understand by any developer, whether they are experienced or fresh.

HTML

First, we have to make a div in the HTML page, and in the div, we will have some properties like “role and area-live” and a class to give styling with the help of CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="loader" role="alert" aria-live="assertive"></div>
</body>
</html>

CSS

After completing the HTML work, we will now make the loader workable with animation with the help of CSS (an external stylesheet attached to the HTML page). In it, we give the color, height, and width to the div, and after adjusting the div, we will now give the animation to the div to move 360 degrees until loading is completed successfully.

* {
    box-sizing: border-box;
  }
  
  :root {
    --hue: 210;
    --size: 100px;
    --border: 10px;
    --speed: 1s;
    --blur: var(--border);
  }
  
  body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    
    background: black;
  }
  
  .loader {
    width: var(--border);
    aspect-ratio: 1;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    position: absolute;
    --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
    transform:
      rotate(0deg)
      translateY(var(--y));
    animation: spin var(--speed) infinite linear;
  }
  
  .loader::before {
    content: "";
    position: absolute;
    inset: calc(var(--border) * -0.5);
    border-radius: 50%;
    background: white;
    filter: blur(var(--blur));
    z-index: -1;
  }
  
  .loader::after {
    content: "";
    width: var(--size);
    aspect-ratio: 1;
    position: absolute;
    top: 0%;
    left: 50%;
    translate: -50% 0;
    background: conic-gradient(white, hsl(var(--hue), 100%, 70%), hsl(var(--hue), 100%, 10%), transparent 65%);
    border-radius: 50%;
    mask: radial-gradient(
      transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
      white calc((var(--size) * 0.5) - var(--border)));
  }
  
  @keyframes spin {
    to { transform: rotate(-360deg) translateY(var(--y)); }
  }

Finally, we made the Css loader with animation by using HTML and CSS step by step.

If you want to see output of the code , then click on the Like .

Press the download button to download the source code

959 B