Skip to content
Related Articles

Related Articles

How to create windows loading effect using HTML and CSS ?
  • Last Updated : 09 Mar, 2021

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

Glipmse 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=
        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=
              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>

Output:

Windows loading effect

My Personal Notes arrow_drop_up
Recommended Articles
Page :