Glowing Cube loader using HTML & CSS

Glowing cube loader can be created using HTML and CSS. We’ll use HTML to create the structure and some CSS properties.

The loader is the part of an operating system that is responsible for loading programs and libraries. It is one of the essential stages in the process of starting a program, as it places programs into memory and prepares them for execution. So we will create a circle loader using HTML and CSS properties.

HTML Code: In this section, we will design the basic structure of the code.

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>Glowing cube loading</title>
    <link rel="stylesheet" href='style.css'>
</head>
<body>
    
   <h1>Loading GeeksforGeeks...</h1>
   <div class="loading"
        <span></span>
   </div>
  
</body>
</html>

chevron_right


CSS Code: In this section, we will use some CSS property to design a Glowing Cube. We’ll use @keyframes which specifies animation code.The animation is created by gradually changing from one set of CSS styles to another. The style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. We can change the set of CSS styles many times.
The syntax for @keyframes is: @keyframes animationname {keyframes-selector {css-styles;}}

filter_none

edit
close

play_arrow

link
brightness_4
code

body{
    background: black;
}
h1
    margin-top: 300px;
    text-align: center;
    color: darkgreen;
}
  
.loading{
      
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;
}
  
.loading span{
    display: block;
    position: absolute;
    bottom: 0;
    background: yellowgreen;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: loading 1.5s infinite ease-in-out;
}
  
@keyframes loading{
    0%
        transform: rotate(0deg);
        background: yellow;
        box-shadow: 0 0 10px black
                    0 0 10px 5px green;
    }
    25%{
        transform: rotate(80deg);
        box-shadow: 0 0 10px #9966ff,
                    0 0 10px 5px black
                    0 0 10px 5px yellow;
    }
    100%{
        transform: rotate(0deg);
    }
}

chevron_right


Complete Code: It is the combination of above two code section, the CSS code is added internally in the HTML code by using style tag.

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>Glowing cube loading</title>
    <style>
body{
    background: black;
}
h1{ 
    margin-top: 300px;
    text-align: center;
    color: darkgreen;
}
  
.loading{
      
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;
}
  
.loading span{
    display: block;
    position: absolute;
    bottom: 0;
    background: yellowgreen;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: loading 1.5s infinite ease-in-out;
}
  
@keyframes loading{
    0%{ 
        transform: rotate(0deg);
        background: yellow;
        box-shadow: 0 0 10px black,
                    0 0 10px 5px green;
    }
    25%{
        transform: rotate(80deg);
        box-shadow: 0 0 10px #9966ff,
                    0 0 10px 5px black,
                    0 0 10px 5px yellow;
    }
    100%{
        transform: rotate(0deg);
    }
}
     </style>
</head>
<body>
    
   <h1>Loading GeeksforGeeks...</h1>
   <div class="loading"
        <span></span>
   </div>
  
</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.