How to create windows loading effect using HTML and CSS ?

Last Updated : 22 Aug, 2022

In this article, we are going to create a window loading effect before the lock screen appears using HTML and CSS.

Glimpse of the Windows Loading Effect:

Approach:

Create an HTML file that contains HTML div in which we are giving the loader effect.
Then we create 5 span elements which are used for creating inline elements.
Then we have to use @keyframe to create animation features.
Then we have to use nth-child() property for selecting different children.

HTML Code:

First, we create an HTML file (index.html).
Now after the creation of our HTML file, we are going to give a title to our webpage using the <title> tag. It should be placed between the <head> tag.
We link the CSS file that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
Now we add a link from Google Fonts to use a different types of font-family in our project.
Coming to the body section of our HTML code.
Then, we have to create a div in which we can store all the heading part and the span tags.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href= 
"https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Hanalei&display=swap"
        rel="stylesheet"> 
</head> 
  
<body> 
    <h1>Windows-Loading-Effect</h1> 
    <div class="container"> 
        <span></span> 
        <span></span> 
        <span></span> 
        <span></span> 
        <span></span> 
    </div> 
</body> 
  
</html> 

CSS code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.

Restore all the browser effects.
Use classes and ids to give effects to HTML elements.
Use of @keyframes for providing the animation/transition effects to the browser.
Use of n-th child() property for calling the child elements.

All the features of CSS are covered in the following code.

style.css

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Common styles of project which 
   are applied to body */
body{ 
    background-color: rgb(0, 21, 138); 
    overflow: hidden; 
    font-family: 'Dosis', sans-serif; 
    color: #fff; 
} 
  
/* Style to our heading */
h1{ 
    display: flex; 
    margin-top: 3em; 
    justify-content: center; 
} 
  
.container{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 
  
span{ 
    display: inline-block; 
    width: 0.6em; 
    height: 0.6em; 
    border-radius: 50%; 
    margin: 0 0.125em; 
    background-color: rgb(235, 217, 217); 
    opacity: 0; 
} 
  
/* Calling childs using nth-child() property */
span:last-child{ 
    animation: move-right 3s infinite; 
    animation-delay: 100ms; 
    background-color: #000; 
} 
span:nth-child(5){ 
    animation: move 3s infinite; 
    animation-delay: 200ms; 
    background-color: rgb(41, 133, 22); 
} 
span:nth-child(4){ 
    animation:  move-right 3s infinite; 
    animation-delay: 300ms; 
    background-color: #000; 
} 
span:nth-child(3){ 
    animation: move 3s infinite; 
    animation-delay: 400ms; 
    background-color: rgb(41, 133, 22); 
} 
span:nth-child(2){ 
    animation:  move-right 3s infinite; 
    animation-delay: 500ms; 
    background-color: #000; 
} 
span:first-child{ 
    animation: move 3s infinite; 
    animation-delay: 600ms; 
    background-color: rgb(41, 133, 22); 
} 
  
  
/* Animations effect*/
@keyframes move{ 
    0%{ 
        transform: translateX(-31em); 
        opacity: 0; 
    } 
    30%,60%{ 
        transform: translateX(0); 
        opacity: 1; 
    } 
    100%{ 
        transform: translateX(31em); 
        opacity: 0; 
    } 
} 
@keyframes move-right{ 
    0%{ 
        transform: translateX(31em); 
        opacity: 0; 
    } 
    30%,60%{ 
        transform: translateX(0); 
        opacity: 1; 
    } 
    100%{ 
        transform: translateX(-31em); 
        opacity: 0; 
    } 
}

Complete Code: Here we will combine above two section of code into one.

index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <link rel="stylesheet" href="style.css" /> 
        <link rel="preconnect" href="https://fonts.gstatic.com" /> 
        <link href= 
"https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Hanalei&display=swap"
              rel="stylesheet" /> 
        <style> 
            * { 
                margin: 0; 
                padding: 0; 
                box-sizing: border-box; 
            } 
  
            /* Common styles of project which 
               are applied to body */ 
            body { 
                background-color: rgb(0, 21, 138); 
                overflow: hidden; 
                font-family: "Dosis", sans-serif; 
                color: #fff; 
            } 
  
            /* Style to our heading */ 
            h1 { 
                display: flex; 
                margin-top: 3em; 
                justify-content: center; 
            } 
  
            .container { 
                position: absolute; 
                top: 50%; 
                left: 50%; 
                transform: translate(-50%, -50%); 
            } 
  
            span { 
                display: inline-block; 
                width: 0.6em; 
                height: 0.6em; 
                border-radius: 50%; 
                margin: 0 0.125em; 
                background-color: rgb(235, 217, 217); 
                opacity: 0; 
            } 
  
            /* Calling childs using nth-child() property */ 
            span:last-child { 
                animation: move-right 3s infinite; 
                animation-delay: 100ms; 
                background-color: #000; 
            } 
            span:nth-child(5) { 
                animation: move 3s infinite; 
                animation-delay: 200ms; 
                background-color: rgb(41, 133, 22); 
            } 
            span:nth-child(4) { 
                animation: move-right 3s infinite; 
                animation-delay: 300ms; 
                background-color: #000; 
            } 
            span:nth-child(3) { 
                animation: move 3s infinite; 
                animation-delay: 400ms; 
                background-color: rgb(41, 133, 22); 
            } 
            span:nth-child(2) { 
                animation: move-right 3s infinite; 
                animation-delay: 500ms; 
                background-color: #000; 
            } 
            span:first-child { 
                animation: move 3s infinite; 
                animation-delay: 600ms; 
                background-color: rgb(41, 133, 22); 
            } 
  
            /* Animations effect */ 
            @keyframes move { 
                0% { 
                    transform: translateX(-31em); 
                    opacity: 0; 
                } 
                30%, 
                60% { 
                    transform: translateX(0); 
                    opacity: 1; 
                } 
                100% { 
                    transform: translateX(31em); 
                    opacity: 0; 
                } 
            } 
            @keyframes move-right { 
                0% { 
                    transform: translateX(31em); 
                    opacity: 0; 
                } 
                30%, 
                60% { 
                    transform: translateX(0); 
                    opacity: 1; 
                } 
                100% { 
                    transform: translateX(-31em); 
                    opacity: 0; 
                } 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Windows-Loading-Effect</h1> 
        <div class="container"> 
            <span></span> 
            <span></span> 
            <span></span> 
            <span></span> 
            <span></span> 
        </div> 
    </body> 
</html> 