How to create windows loading effect using HTML and CSS ? - GeeksforGeeks

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="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>
Output:
Windows loading effect
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)