header ads

Make a Preloader Using HTML and CSS

Hanif Miah December 14, 2018
preloader.html

 <html>
<style>
body
{
  height:100vh;
  background-color:#333;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loader-container

{
  position: relative;
  height: 100px;
  width: 100px;
  animation: loader-container 10s linear infinite;
}
.loader-container>div
{
  width: 44px;
  height: 44px;
  position: absolute;
  box-shadow: 0 0 10px -2px rgba(0,0,0,0.5);
  animation-duration: 2500ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.box1
{
  background-color:red;
  top: 4px;
  left:4px;
  transform-origin: bottom center;
  animation-name: box1;
}
.box2
{
  background-color: yellow;            
  top: 4px;
  right:4px;
  transform-origin:center left;
  animation-name: box2;
}
.box3
{
  background-color:green;
  bottom: 4px;
  right:4px;
  transform-origin: top center;
  animation-name: box3;
}
.box4
{
  background-color: blue;
  bottom: 4px;
  left:4px;
  transform-origin:center right;
  animation-name: box4;
}
@keyframes box1
{
  0%{transform:perspective(200px)rotateX(90deg);}
  11%{transform:perspective(200px)rotateX(0deg);}
  88%{transform:perspective(200px)rotateX(0deg);}
  99%{transform:perspective(200px)rotateX(90deg);}
  100%{transform:perspective(200px)rotateX(90deg);}
}
@keyframes box2
{
  0%{transform:perspective(200px)rotateY(90deg);}
  11%{transform:perspective(200px)rotateY(90deg);}
  22%{transform:perspective(200px)rotateY(0deg);}
  77%{transform:perspective(200px)rotateY(0deg);}
  88%{transform:perspective(200px)rotateY(90deg);}
  100%{transform:perspective(200px)rotateY(90deg);}
}
@keyframes box3
{
  0%{transform:perspective(200px)rotateX(-90deg);}
  22%{transform:perspective(200px)rotateX(-90deg);}
  33%{transform:perspective(200px)rotateX(0deg);}
  66%{transform:perspective(200px)rotateX(0deg);}
  77%{transform:perspective(200px)rotateX(-90deg);}
  100%{transform:perspective(200px)rotateX(-90deg);}
}
@keyframes box4
{
  0%{transform:perspective(200px)rotateY(-90deg);}
  33%{transform:perspective(200px)rotateY(-90deg);}
  44%{transform:perspective(200px)rotateY(0deg);}
  55%{transform:perspective(200px)rotateY(0deg);}
  66%{transform:perspective(200px)rotateY(-90deg);}
  100%{transform:perspective(200px)rotateY(-90deg);}
}
@keyframes loader-container
{
 0%{transform:rotate(0);}
 23%{transform:rotate(0);}
 25%{transform:rotate(90deg);}
 48%{transform:rotate(90deg);}
 50%{transform:rotate(180deg);}
 73%{transform:rotate(180deg);}          
 75%{transform:rotate(270deg);}
 98%{transform:rotate(270deg);}
 100%{transform:rotate(360deg);}
}


 </style>

 <body>
<div class="loader-container">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</div>
</body>
</html>                                                  
Tags:
Hanif Miah

Posted by: Hanif Miah

Post a Comment

2 Comments