Skip to content
Related Articles

Related Articles

Improve Article

Cartoon animation loader using CSS

  • Last Updated : 29 Jun, 2020

In the operating system, all the loading of programs and libraries are handled by a loader which is one of the important processes for starting a program. The programs are kept in the memory for further execution.

HTML Code: In this section, the basic structure of the code is designed.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Animated loader</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div class="pieces"></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="eye"></div>
    <p>GeeksforGeeks loading...</p>
</body>
  
</html>

CSS Code: In this section, the design of cartoon loader is implemented using CSS properties such as @keyframes. The animation is created by gradually changing from one set of style to another. The changes are in percent or with the keywords “from” and “to”, which will be the same as 0% and 100%. We can change the set of CSS styles as many times as required.

Syntax:



@keyframes animationname {keyframes-selector {css-styles;}}




body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #202020;
  
}
.pieces{
    padding: 10px;
    border-radius: 50%;
    background: #ffcc00;
    position: absolute;
    right: 40%;
    animation: pieces 1s linear infinite;
}
.one{
    position: absolute;
    top: 50.5%;
    left: 30%;
    background: yellowgreen;
    border-radius: 0 0 125px 125px;
    height: 125px;
    width: 250px;
    animation: anim1 1s linear infinite;
}
.two{
    position: absolute;
    top: 36.5%;
    left: 30%;
    background: yellowgreen;
    border-radius: 125px 125px 0 0;
    height: 125px;
    width: 250px;
    animation: anim2 1s linear infinite;
}
.eye{
    position: absolute;
    right: 60%;
    top: 40%;
    background: #202020;
    padding: 12px;
    border-radius: 50%;
    animation: eye 1s linear infinite;
}
p{
    position: absolute;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 2px;
    top: 53%;
    right: 30%;
    font-family: arial;
    color: green;
}
@keyframes anim1{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes anim2{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(-20deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes eye{
    0%{
        top: 40%;
        right: 60%;
    }
    50%{
        top: 40.3%;
        right: 60.3%;
    }
    100%{
        top: 40%;
        right: 60%;
    }
}
@keyframes pieces{
    0%{
        right: 40%;
    }
    100%{
        right: 60%;
    }
}

Complete Code: It is the combination of above two code sections.




<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
      
  <title>Animated loader</title>
  
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #202020;
  
    }
  
    .pieces {
      padding: 10px;
      border-radius: 50%;
      background: #ffcc00;
      position: absolute;
      right: 40%;
      animation: pieces 1s linear infinite;
    }
  
    .one {
      position: absolute;
      top: 50.5%;
      left: 30%;
      background: yellowgreen;
      border-radius: 0 0 125px 125px;
      height: 125px;
      width: 250px;
      animation: anim1 1s linear infinite;
    }
  
    .two {
      position: absolute;
      top: 36.5%;
      left: 30%;
      background: yellowgreen;
      border-radius: 125px 125px 0 0;
      height: 125px;
      width: 250px;
      animation: anim2 1s linear infinite;
    }
  
    .eye {
      position: absolute;
      right: 60%;
      top: 40%;
      background: #202020;
      padding: 12px;
      border-radius: 50%;
      animation: eye 1s linear infinite;
    }
  
    p {
      position: absolute;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 25px;
      letter-spacing: 2px;
      top: 53%;
      right: 30%;
      font-family: arial;
      color: green;
    }
  
    @keyframes anim1 {
      0% {
        transform: rotate(0deg);
      }
  
      50% {
        transform: rotate(20deg);
      }
  
      100% {
        transform: rotate(0deg);
      }
    }
  
    @keyframes anim2 {
      0% {
        transform: rotate(0deg);
      }
  
      50% {
        transform: rotate(-20deg);
      }
  
      100% {
        transform: rotate(0deg);
      }
    }
  
    @keyframes eye {
      0% {
        top: 40%;
        right: 60%;
      }
  
      50% {
        top: 40.3%;
        right: 60.3%;
      }
  
      100% {
        top: 40%;
        right: 60%;
      }
    }
  
    @keyframes pieces {
      0% {
        right: 40%;
      }
  
      100% {
        right: 60%;
      }
    }
  </style>
</head>
  
<body>
  <div class="pieces"></div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="eye"></div>
  
  <p>GeeksforGeeks loading...</p>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :