css loader

made the original code look more cool...

<!DOCTYPE html>
<html >
<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/ */
.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);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( css loader ) is write by Daljeet Dhaliwal, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Daljeet Dhaliwal