Minimalistic CSS Loader

In this example below you will see how to do a Minimalistic CSS Loader with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DU7S, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DU7S ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Minimalistic CSS Loader</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="center">
  <div class="preloader"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/DU7S/minimalistic-css-loader-aAHhr */
.center {
  width: 40px;
  margin: 100px auto;
}

.preloader {
  display: block;
  width: 40px;
  height: 40px;
  border: solid 3px;
  border-color: #555555 transparent;
  border-radius: 50%;
    -webkit-animation: 
        rota 1s ease-in-out infinite;
    -moz-animation: 
        rota 1s ease-in-out infinite;
    -ms-animation: 
        rota 1s ease-in-out infinite;
    -o-animation: 
        rota 1s ease-in-out infinite;
    animation: 
        rota 1s ease-in-out infinite;
}

@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

Comments