Glowing Cube loader using HTML & CSS

Last Updated : 08 Jun, 2023

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.

html

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

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

css

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

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

html

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

Output:

How to create Glowing Star effect using HTML and CSS?

nehaahlawat

Improve

Article Tags :

Glowing Cube loader using HTML & CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?