Cartoon animation loader using CSS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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;}}
filter_none

edit
close

play_arrow

link
brightness_4
code

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%;
    }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.