LOADERS CREATION IN HTML and CSS
We have created different 4 types of
LOADERS . We have applied different coding techniques for achieving result. You
should try this web program once it will yield great knowledge to you.
PROGRAM SOURCE CODE :)
1) HTML Coding :-
<!DOCTYPE html>
<html>
<head>
<meta name ="viewport" content="width:device-width,initial-scale:1.0">
<link rel="stylesheet" type="text/css" href="..\CSS\Loader.css">
<title>Loader on Webpage</title>
</head>
<body>
<h2>Loader - 1</h2>
<div class="first">
<div class="loader1"></div>
</div>
<h2>Loader - 2</h2>
<div class="loader2">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
<h2>Loader - 3</h2>
<div class="third">
<div class="loader3"></div>
<h3>Loading</h3>
</div>
<h2>Loader - 4</h2>
<div class="third">
<div class="center-div">
<span></span>
<span></span>
<span></span>
</div>
</div>
<footer>
<marquee scrollamount="20"><h1>Thanks for watching!!</h1></marquee>
</footer>
</body>
</html>
2) CSS Coding :-
*{
margin:0px;
padding: 0px;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
overflow-x: hidden;
}
marquee h1{
font-family: vernda;
font-size: 4rem;
letter-spacing: .2rem;
padding: 3rem;
color: red;
}
/* <-------Loader -1 Styling Start--------->*/
h2{
width: 100vw;
font-family:Georgia;
font-weight: 900;
letter-spacing: .2rem;
text-transform: uppercase;
font-size: 3rem;
text-align:center;
color:#fff;
background-color: #011;
padding: 2rem;
}
.first{
width: 100vw;
height:40rem;
display: flex;
justify-content: center;
align-items: center;
}
.loader1{
width: 20rem;
height: 20rem;
border:2.5rem solid #fff;
border-left:2.5rem solid blue;
border-top: 2.5rem solid blue;
border-right: 2.5rem solid blue;
border-radius: 50%;
animation: f 0.7s linear infinite;
}
@keyframes f{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/* <---------Loader -1 Styling End--------> */
/* <-------Loader -2 Styling Start-------> */
.loader2{
width: 100vw;
height: 60rem;
margin:5rem 0rem 10rem 0rem;
position: relative;
animation: h 2s linear infinite;
background: #000;
}
@keyframes h{
from{
filter: hue-rotate(0deg);
}
to{
filter: hue-rotate(360deg);
}
}
.loader2 span{
width: 10%;
height: 10%;
position: absolute;
top: 30rem;
left:55rem;
transform: rotate(calc(18deg * var(--i)));
}
.loader2 span::before{
content: " ";
width: 1rem;
height: 1rem;
position: absolute;
top: 10rem;
left:20rem;
background-color: #4cd137;
border-radius: 50%;
box-shadow: 0 0 1rem #4cd137, 0 0 2rem #4cd137,
0 0 4rem #4cd137, 0 0 6rem #4cd137,
0 0 8rem #4cd137, 0 0 10rem #4cd137;
animation: rot 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes rot{
0%{
transform: scale(1);
}
80%,100%{
transform: scale(0);
}
}
/* <---------Loader - 2 Styling End----------> */
/*<-------Loader - 3 Styling Start---------> */
.third{
width: 100vw;
height:60rem;
display: flex;
justify-content: center;
align-items: center;
background: #000;
margin: 5rem 0rem 10rem 0rem;
position: relative;
}
.loader3{
width: 30rem;
height: 30rem;
border-radius: 50%;
border-left:1rem solid #fff;
animation: r 1s linear infinite;
}
.third h3{
color: #fff;
font-family: cursive;
font-size: 3.5rem;
letter-spacing: .2rem;
z-index: 1000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes r{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
/* <-------Loader - 3 Styling End-------> */
/* <-------Loader -4 Styling Start-------->*/
.center-div
{
width: 25rem;
height: 25rem;
position: relative;
}
.center-div span{
width: 7rem;
height: 7rem;
position: absolute;
background-color: #ff0000;
animation: roll 3s linear infinite;
}
@keyframes roll{
0%{
top: 0%;
left: 0%;
}
12.5%{
top:0%;
left: 50%;
}
25%{
top:0%;
left: 50%;
}
37.5%{
top: 50%;
left: 50%;
}
50%{
top: 50%;
left: 50%;
}
62.5%{
top: 50%;
left: 0%;
}
75%{
top: 50%;
left: 0%
}
87.5%{
top: 0%;
left: 0%;
}
100%{
top: 0%;
left: 0%;
}
}
.center-div span:nth-child(2){
animation-delay: 1s;
background-color: #FFD700 ;
}
.center-div span:nth-child(3){
animation-delay:2s;
background-color: #0000FF ;
}
/*<------Loader - 3 Styling End -------->*/
OUTPUT :-
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
