Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Approaches
There are various techniques to employ CSS to create a wave loader. Here are three popular approaches −
Using Div Elements
Using SVG paths
Let us look at each approach in detail with examples now.
Approach 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;
}
.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(2) {
animation-delay: -0.4s;
}
.wave-loader div:nth-child(3) {
animation-delay: -0.2s;
}
@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>
</body>
</html>
Approach 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-dash array and stroke-dash offset 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>
.wave-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wave-loader svg {
width: 100px;
height: 60px;
}
.wave-loader path {
stroke: #0077ff;
stroke-width: 3;
stroke-dasharray: 120;
stroke-dashoffset: 0;
animation: wave 1s ease-in-out infinite;
}
.wave-loader path:nth-child(2) {
animation-delay: -0.4s;
}
.wave-loader path:nth-child(3) {
animation-delay: -0.2s;
}
@keyframes wave {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 60;
}
100% {
stroke-dashoffset: 120;
}
}
</style>
</head>
<body>
<div class="wave-loader">
<svg viewBox="0 0 100 60">
<path d="M0 30 Q 20 10 40 30 T 80 30" />
<path d="M0 30 Q 20 50 40 30 T 80 30" />
<path d="M0 30 Q 20 70 40 30 T 80 30" />
</svg>
</div>
</body>
</html>
Conclusion
There are various ways to make a wave loader using CSS, including div elements, SVG paths, and gradients. Depending on your individual design goals and objectives, each technique offers pros and downsides.
The div elements method is simple to apply and tweak, and it can be used to generate a wide range of wave-like effects. The SVG paths method is more complicated, but it provides more exact control over the animation and is suitable for constructing more detailed waveforms. The gradient strategy is the most basic of the three, yet it may still be successful and is an excellent choice if you need a quick and uncomplicated answer.
446 Views
