CSS Loader Animation Version_5

Image

Real time example

Inspect the HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Loading Animation</title>
    </head>
    <body>
 <div class="container-load">
  <div class="loader">
    <div class="loader">
      <div class="loader">
       <div class="loader">
        <div class="loader">
          <div class="loader">
           <div class="loader">
             <div class="loader">
               <div class="loader">
                <div class="loader">
                  <div class="loader">
      
                  </div>
                 </div>
                </div>
               </div>
              </div>
             </div>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
<style>
    body {
  background:#FFF;
}
.container-load {
  transform: translate(-50%,80%);
  width:200px;
  height:200px;
  border-radius:50%;
  position:relative  ;
  top:50%;
  left:50%;
  animation:colorize 1s ease infinite; 
  overflow:hidden;
}

@keyframes colorize {
  20% { filter:hue-rotate(72deg); }
  40% { filter:hue-rotate(144deg); }
  60% { filter:hue-rotate(216deg); }
  80% { filter:hue-rotate(288deg); }
  100% { filter:hue-rotate(360deg); }
}

.loader {
  width:calc(100% - 12px);
  height:calc(100% - 12px);
  position:absolute;
  border:5px solid #000;
  border-top:10px solid #09f;
  border-radius:50%;
  animation-fill-mode: forwards;
  animation:rotate 5s 0.5s linear infinite;
}
@keyframes rotate {
  30% { transform: rotate(270deg); }
  40% { transform: rotate(240deg); }
  50% { transform: rotate(210deg); }
  60% { transform: rotate(180deg); }
  70% { transform: rotate(150deg); }
}</style>
</body>
</html>

Kumar Lakshmanan

CSS Loader Animation

Image

Real time example

Inspect the HTML

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

CSS Loader Animation

Image

Real time example

Inspect the HTML

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget