Smooth Ripple Effect Loader Using HTML and CSS (Free Source Code)
Smooth Ripple Effect Loader Using HTML and CSS is an eye-catching loading animation that boosts website user experience.
This animation makes a smooth flowing liquid motion which instantly attracts viewer attention. I will offer you free source code that maintains good programming standards for beginners and professionals to implement without difficulty.
This Smooth Ripple Effect Loader serves as the preferred choice for displaying modern loading screens in various projects. This component can smoothly integrate into web components and various website elements when building an Open-Source UI. HTML and CSS principles enable beginners in web development and college students and novices to work with this code.
GitHub Source: Smooth Ripple Effect Loader
Features
- Vibrant Color Transitions: The loader uses multiple colors to create a visually appealing ripple.
- Lightweight Structure: Pure HTML and CSS ensure fast load times and easy integration.
- Responsive Design: It adapts seamlessly to different screen sizes, making it mobile-friendly.
- Simple Customization: You can tweak animation duration, colors, and spacing without hassle.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- 3D Cube Loader
- Animated Multi-Color Text Loader
- Animated Hamster Loading Wheel
- Modern 3D Biometric Toggle Switch
- Interactive Toggle Switch
Video Tutorial
Steps to Build Website Loader
Creating this loader is simple. You can copy the HTML section to your webpage while adding the stylesheet CSS content to your website. You can modify both color schemes and dimensions or duration to suit your website design. You can save time on implementation while also making this effect suitable for beginning and expert coding projects.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Developed by Shokat Javed available at www.jvcodes.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Ripple Effect Loader - JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div class="cell d-0"></div>
<div class="cell d-1"></div>
<div class="cell d-2"></div>
<div class="cell d-1"></div>
<div class="cell d-2"></div>
<div class="cell d-2"></div>
<div class="cell d-3"></div>
<div class="cell d-3"></div>
<div class="cell d-4"></div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the loader:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #383838;
}
.loader {
--cell-size: 52px;
--cell-spacing: 1px;
--cells: 3;
--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
display: flex;
flex-wrap: wrap;
width: var(--total-size);
height: var(--total-size);
}
.cell {
flex: 0 0 var(--cell-size);
margin: var(--cell-spacing);
background-color: transparent;
box-sizing: border-box;
border-radius: 4px;
animation: 1.5s ripple ease infinite;
}
.cell.d-1 {
animation-delay: 100ms;
}
.cell.d-2 {
animation-delay: 200ms;
}
.cell.d-3 {
animation-delay: 300ms;
}
.cell.d-4 {
animation-delay: 400ms;
}
.cell:nth-child(1) {
--cell-color: #ff0000;
}
.cell:nth-child(2) {
--cell-color: #ff1717;
}
.cell:nth-child(3) {
--cell-color: #fc572e;
}
.cell:nth-child(4) {
--cell-color: #ff6a14;
}
.cell:nth-child(5) {
--cell-color: #f77930;
}
.cell:nth-child(6) {
--cell-color: #ff8a03;
}
.cell:nth-child(7) {
--cell-color: #fa9c5e;
}
.cell:nth-child(8) {
--cell-color: #fca13a;
}
.cell:nth-child(9) {
--cell-color: #fca22c;
}
/*Animation*/
@keyframes ripple {
0% {
background-color: transparent;
}
30% {
background-color: var(--cell-color);
}
60% {
background-color: transparent;
}
100% {
background-color: transparent;
}
}
Download Source Code
Find this source code with no copyright restrictions at the below button. You can freely adapt the code source into either commercial or personal work.
Conclusion
Implement this code to create attractive user experiences. Your portfolio benefits through better presentation of your skills in modern interactive design implementation.
Please attribute JV Source Codes by linking back while subscribing to more resources through comments where you can reach me for assistance.
