Saksham Digital Technology - Best Coding Institute in Bhopal

Loader Animation

https://youtube.com/shorts/dNwgzs1e9pk?si=askyYGYpFJN0g3EW

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
</head>
<body>
   <div class="container"></div>
</body>
</html>

CSS CODE:-

body{
           margin: 0px;
            padding: 0px;
            background-color: black;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.container {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
     }
.container::after {
           content: " ";
           display: block;
           border-radius: 50%;
           width: 0;
           height: 0;
           margin: 8px;
           box-sizing: border-box;
           border: 32px solid white;
           border-color: white transparent;
           animation: animate 2s infinite;
}
@keyframes animate {
         0% {
              transform: rotate(0);
              animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
           }
         50% {
              transform: rotate(900deg);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          }
         100% {
               transform: rotate(1800deg);
          }
}