Loaders in CSS

      No Comments on Loaders in CSS

Loaders in CSS -using @keyframes animations.

Here it is!


Loaders in CSS- try it yourself

<head>
<style>
.load_cnt
{
    background-color:#00004d;
    width:100%;
    height:100%;
    position: absolute;
    top:0;left:0;
}
.loader-wrapper {
  border: 6px solid orange;
  border-radius: 0%;
  animation-name:loader; 
  animation-duration:3s; 
  animation-iteration-count:infinite; 
  animation-timing-function:ease; 
  width: 60px;
  height: 60px;
  margin-left:40%;
  margin-top:50%;
}
.loader
{
height:0px;
background-color:orange;
 animation-name:loaderin; 
  animation-duration:3s; 
  animation-iteration-count:infinite; 
  animation-timing-function:ease; 
}
@keyframes loader{

  35%{ 
   
    transform:rotate(0deg);
  } 
  
  50%{ 

    transform:rotate(180deg);
  } 
  
  85%{ 
 
    transform:rotate(180deg);
  } 
  
  100%{ 
    transform:rotate(360deg); 
  } 
  }
@keyframes loaderin{

  35%{ 
   
   height:60px;
    }
    
  }
@media screen and (min-width: 480px)
{
  .loader-wrapper {
  
  margin-left:46%;
  margin-top:20%;
}  
} 
</style>
</head>
<body>
<div class="load_cnt">
<div class="loader-wrapper">
<div class="loader"></div>
</div>
</div>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *