A Wave Loader can be used in websites when something is loading it will provide better user experience, The wave loader can be easily created using HTML and CSS.
HTML Code: In this section, we will create a basic div tag which consists of various span tags inside of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Wave Loader</title>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
|
CSS Code: In this section, we will first design the span element using some basic CSS properties, then we will use the nth-child() Selector to select every span element i.e the nth child and then we will create the loading animation using @keyframes rule.
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 30px;
width: 7px;
margin-right: 10px;
background-color: green;
animation: loading 1s linear infinite;
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
// @keyframes for animation
@keyframes loading {
0%{
height: 0;
}
25%{
height: 25px;
}
50%{
height: 50px;
}
100%{
height: 0;
}
}
</style>
|
Final Code: It is the combination of the above two code sections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Wave Loader</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 30px;
width: 7px;
margin-right: 10px;
background-color: green;
animation: loading 1s linear infinite;
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
@keyframes loading {
0%{
height: 0;
}
25%{
height: 25px;
}
50%{
height: 50px;
}
100%{
height: 0;
}
}
</style>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
17 Jul, 2020
Like Article
Save Article