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