css loader

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

made the original code look more cool...

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

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

  
</head>

<body>

  <body bgcolor="#1788bf">
<div class="spinner"></div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/daljeet/css-loader-aAdKp */
.spinner {
  width: 200px;
  height: 200px;
  background-color: #fff;

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Comments