Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a Wave Loader using CSS?
In this article, we will be creating a Wave Loader using CSS. Wave loader is a loading animation with a wave-like effect. It is a standard way for signaling progress in online applications, and it may enhance the user experience by indicating that material is being loaded. Making a CSS wave loader is a basic technique that uses CSS animation and keyframes. You may design a dynamic and aesthetically beautiful wave loader that can be adjusted to meet your individual demands by setting the animation attributes and keyframes.
Syntax
@keyframes wave-animation {
0% { transform: scaleY(value); }
50% { transform: scaleY(value); }
100% { transform: scaleY(value); }
}
.element {
animation: wave-animation duration ease-in-out infinite;
animation-delay: delay-value;
}
Approaches
There are various techniques to employ CSS to create a wave loader. Here are two popular approaches
Using Div Elements
Using SVG paths
Let us look at each approach in detail with examples now.
Method 1: Using Div Elements
The first approach to create a wave loader is by using div elements. Creating a succession of div components and animating them with the transform and translate attributes to produce a wave-like effect is what this entails.
Here, we will go through an example to implement this approach
<!DOCTYPE html>
<html>
<head>
<title>Wave Loader using CSS and Div Elements</title>
<style>
.wave-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.wave-loader div {
width: 20px;
height: 60px;
background-color: #0077ff;
margin: 0 5px;
border-radius: 50% 50% 0 0;
transform-origin: bottom;
animation: wave 1s ease-in-out infinite;
}
.wave-loader div:nth-child(1) {
animation-delay: 0s;
}
.wave-loader div:nth-child(2) {
animation-delay: -0.4s;
}
.wave-loader div:nth-child(3) {
animation-delay: -0.2s;
}
.wave-loader div:nth-child(4) {
animation-delay: -0.6s;
}
.wave-loader div:nth-child(5) {
animation-delay: -0.8s;
}
@keyframes wave {
0% {
transform: scaleY(0.4);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.4);
}
}
</style>
</head>
<body>
<div class="wave-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Five blue bars with rounded tops animate in a wave pattern, scaling up and down to create a rhythmic loading animation effect.
Method 2: Using SVG Paths
The second approach to create a wave loader is by using SVG paths. This entails making a succession of SVG paths and animating them with the stroke-dasharray and stroke-dashoffset attributes to get a wave-like effect.
Example
Here, we will go through an example to implement this approach
<!DOCTYPE html>
<html>
<head>
<title>Wave Loader using CSS and SVG Paths</title>
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
.wave-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wave-loader svg {
width: 200px;
height: 80px;
}
.wave-loader path {
fill: none;
stroke: #0077ff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: wave-draw 2s ease-in-out infinite;
}
.wave-loader path:nth-child(1) {
animation-delay: 0s;
opacity: 1;
}
.wave-loader path:nth-child(2) {
animation-delay: -0.5s;
opacity: 0.7;
}
.wave-loader path:nth-child(3) {
animation-delay: -1s;
opacity: 0.4;
}
@keyframes wave-draw {
0% {
stroke-dashoffset: 100;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
</style>
</head>
<body>
<div class="wave-loader">
<svg viewBox="0 0 200 80">
<path d="M10 40 Q50 10 90 40 T170 40" />
<path d="M10 40 Q50 70 90 40 T170 40" />
<path d="M10 40 Q50 20 90 40 T170 40" />
</svg>
</div>
</body>
</html>
Three curved wave lines with different opacities animate in sequence, creating a flowing wave effect as they draw and redraw continuously.
Conclusion
Both methods offer effective ways to create wave loaders using CSS. The div elements approach is simpler to implement and customize, while the SVG paths method provides more precise control over wave shapes and animations.
909 Views
