CSS Loader

Colourful CSS Loader What is a css loader How do you make a css loader? This script and codes were developed by Jeya Karthika on 01 February 2022, Tuesday.

How do I make an css loader?
  1. CSS Loader Previews
  2. CSS Loader HTML Codes
  3. CSS Loader CSS Codes
CSS Loader Previews

CSS Loader HTML Codes

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

  
</head>

<body>
  
<h1 class="masked">
  CSS Loader
</h1>

<div class="loader"></div>
  <script src='https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js'></script>

  
</body>
</html>

CSS Loader CSS Codes

@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:800);

h1 {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 65px;
  text-align: center;
  color: #344251;
  text-shadow: 1px 1px 0px DED6C4;
}

.loader {
  position: relative;
  margin: 20px auto;
  width: 247px;
  height: 15px;
  animation: 0.5s load infinite;
} 

@keyframes load{
  11%{     
    background-image: linear-gradient(90deg, rgba(44, 62, 80,1.0) 30px,  transparent 0, transparent 31px,  transparent 0, 
                                             transparent 61px,  transparent 0, transparent 62px,  rgba(231, 76, 60,1.0) 0, 
                                             rgba(231, 76, 60,1.0) 92px,  transparent 0, transparent 93px,  rgba(230, 126, 34,1.0) 0,
                                             rgba(230, 126, 34,1.0) 123px, transparent 0, transparent 124px, rgba(241, 196, 15,1.0) 0,
                                             rgba(241, 196, 15,1.0) 154px, transparent 0, transparent 155px, rgba(46, 204, 113,1.0) 0,
                                             rgba(46, 204, 113,1.0) 185px, transparent 0, transparent 186px, rgba(26, 188, 156,1.0) 0,
                                             rgba(26, 188, 156,1.0) 216px, transparent 0, transparent 217px, rgba(52, 152, 219,1.0) 0);
  }
  22%{
    background-image: linear-gradient(90deg, rgba(52, 152, 219,1.0) 30px,  transparent 0, transparent 31px,  rgba(44, 62, 80,1.0)  0, 
                                             rgba(44, 62, 80,1.0) 61px,  transparent 0, transparent 62px,  transparent 0, 
                                             transparent 92px,  transparent 0, transparent 93px,  rgba(231, 76, 60,1.0) 0,
                                             rgba(231, 76, 60,1.0) 123px, transparent 0, transparent 124px, rgba(230, 126, 34,1.0) 0,
                                             rgba(230, 126, 34,1.0) 154px, transparent 0, transparent 155px, rgba(241, 196, 15,1.0) 0,
                                             rgba(241, 196, 15,1.0) 185px, transparent 0, transparent 186px, rgba(46, 204, 113,1.0) 0,
                                             rgba(46, 204, 113,1.0) 216px, transparent 0, transparent 217px, rgba(26, 188, 156,1.0) 0);
  }
  33%{
   background-image: linear-gradient(90deg,  rgba(26, 188, 156,1.0)  30px,  transparent 0, transparent 31px,  rgba(52, 152, 219,1.0)  0, 
                                             rgba(52, 152, 219,1.0) 61px,  transparent 0, transparent 62px,  rgba(44, 62, 80,1.0) 0, 
                                             rgba(44, 62, 80,1.0) 92px,  transparent 0, transparent 93px,  transparent 0,
                                             transparent 123px, transparent 0, transparent 124px, rgba(231, 76, 60,1.0) 0,
                                             rgba(231, 76, 60,1.0) 154px, transparent 0, transparent 155px, rgba(230, 126, 34,1.0) 0,
                                             rgba(230, 126, 34,1.0) 185px, transparent 0, transparent 186px, rgba(241, 196, 15,1.0) 0,
                                             rgba(241, 196, 15,1.0) 216px, transparent 0, transparent 217px, rgba(46, 204, 113,1.0) 0);
  }
  44%{
   background-image: linear-gradient(90deg,  rgba(46, 204, 113,1.0)  30px,  transparent 0, transparent 31px,  rgba(26, 188, 156,1.0)  0, 
                                             rgba(26, 188, 156,1.0) 61px,  transparent 0, transparent 62px,  rgba(52, 152, 219,1.0) 0, 
                                             rgba(52, 152, 219,1.0) 92px,  transparent 0, transparent 93px,  rgba(44, 62, 80,1.0) 0,
                                             rgba(44, 62, 80,1.0) 123px, transparent 0, transparent 124px, transparent 0,
                                             transparent 154px, transparent 0, transparent 155px, rgba(231, 76, 60,1.0) 0,
                                             rgba(231, 76, 60,1.0) 185px, transparent 0, transparent 186px, rgba(230, 126, 34,1.0) 0,
                                             rgba(230, 126, 34,1.0) 216px, transparent 0, transparent 217px, rgba(241, 196, 15,1.0) 0);
  }
  55%{
   background-image: linear-gradient(90deg,  rgba(241, 196, 15,1.0)  30px,  transparent 0, transparent 31px,  rgba(46, 204, 113,1.0)  0, 
                                             rgba(46, 204, 113,1.0) 61px,  transparent 0, transparent 62px,  rgba(26, 188, 156,1.0) 0, 
                                             rgba(26, 188, 156,1.0) 92px,  transparent 0, transparent 93px,  rgba(52, 152, 219,1.0) 0,
                                             rgba(52, 152, 219,1.0) 123px, transparent 0, transparent 124px, rgba(44, 62, 80,1.0) 0,
                                             rgba(44, 62, 80,1.0) 154px, transparent 0, transparent 155px, transparent 0,
                                             transparent 185px, transparent 0, transparent 186px, rgba(231, 76, 60,1.0) 0,
                                             rgba(231, 76, 60,1.0) 216px, transparent 0, transparent 217px, rgba(230, 126, 34,1.0) 0);  
  }
  66%{   
   background-image: linear-gradient(90deg,  rgba(230, 126, 34,1.0)  30px,  transparent 0, transparent 31px,  rgba(241, 196, 15,1.0)  0, 
                                             rgba(241, 196, 15,1.0) 61px,  transparent 0, transparent 62px,  rgba(46, 204, 113,1.0) 0, 
                                             rgba(46, 204, 113,1.0) 92px,  transparent 0, transparent 93px,  rgba(26, 188, 156,1.0) 0,
                                             rgba(26, 188, 156,1.0) 123px, transparent 0, transparent 124px, rgba(52, 152, 219,1.0) 0,
                                             rgba(52, 152, 219,1.0) 154px, transparent 0, transparent 155px, rgba(44, 62, 80,1.0) 0,
                                             rgba(44, 62, 80,1.0) 185px, transparent 0, transparent 186px, transparent 0,
                                             transparent 216px, transparent 0, transparent 217px, rgba(231, 76, 60,1.0) 0); 
  }
  77%{
   background-image: linear-gradient(90deg,  rgba(231, 76, 60,1.0)  30px,  transparent 0, transparent 31px,  rgba(230, 126, 34,1.0)  0, 
                                             rgba(230, 126, 34,1.0) 61px,  transparent 0, transparent 62px,  rgba(241, 196, 15,1.0) 0, 
                                             rgba(241, 196, 15,1.0) 92px,  transparent 0, transparent 93px,  rgba(46, 204, 113,1.0) 0,
                                             rgba(46, 204, 113,1.0) 123px, transparent 0, transparent 124px, rgba(26, 188, 156,1.0) 0,
                                             rgba(26, 188, 156,1.0) 154px, transparent 0, transparent 155px,  rgba(52, 152, 219,1.0) 0,
                                             rgba(52, 152, 219,1.0) 185px, transparent 0, transparent 186px, rgba(44, 62, 80,1.0) 0,
                                             rgba(44, 62, 80,1.0) 216px, transparent 0, transparent 217px, transparent 0); 
  }
  88%{
    background-image: linear-gradient(90deg, transparent 30px,  transparent 0, transparent 31px,  rgba(231, 76, 60,1.0) 0, 
                                             rgba(231, 76, 60,1.0) 61px,  transparent 0, transparent 62px,  rgba(230, 126, 34,1.0) 0, 
                                             rgba(230, 126, 34,1.0) 92px,  transparent 0, transparent 93px,  rgba(241, 196, 15,1.0) 0,
                                             rgba(241, 196, 15,1.0) 123px, transparent 0, transparent 124px, rgba(46, 204, 113,1.0) 0,
                                             rgba(46, 204, 113,1.0) 154px, transparent 0, transparent 155px, rgba(26, 188, 156,1.0) 0,
                                             rgba(26, 188, 156,1.0) 185px, transparent 0, transparent 186px, rgba(52, 152, 219,1.0) 0,
                                             rgba(52, 152, 219,1.0) 216px, transparent 0, transparent 217px, rgba(44, 62, 80,1.0) 0);
  }
  100%{   
    background-image: linear-gradient(90deg, transparent 30px,  transparent 0, transparent 31px,  transparent 0, 
                                             transparent 61px,  transparent 0, transparent 62px,  rgba(231, 76, 60,1.0) 0, 
                                             rgba(231, 76, 60,1.0) 92px,  transparent 0, transparent 93px,  rgba(230, 126, 34,1.0) 0,
                                             rgba(230, 126, 34,1.0) 123px, transparent 0, transparent 124px, rgba(241, 196, 15,1.0) 0,
                                             rgba(241, 196, 15,1.0) 154px, transparent 0, transparent 155px, rgba(46, 204, 113,1.0) 0,
                                             rgba(46, 204, 113,1.0) 185px, transparent 0, transparent 186px, rgba(26, 188, 156,1.0) 0,
                                             rgba(26, 188, 156,1.0) 216px, transparent 0, transparent 217px, rgba(52, 152, 219,1.0) 0);
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.