Open In App

Cartoon animation loader using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 29 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads