Ripple effect loaders feel very smooth on websites and make it more user friendly.
Generally, the ripple effect is used on buttons for a smooth click experience. Even more, many operating systems and applications use a ripple effect for good user experience.
Ripple Effect Website Loader
The given code is for ripple loader using pure CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ripple Effect With CSS</title>
<style>
.ripple-back {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
background-color: #fff;
display: block;
}
.ripple-loader {
top: calc(50% - 50px);
left: calc(50% - 50px);
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #1a237e;
}
.ripple-loader:before {
content: 'Loading';
position: absolute;
font-family: 'Open Sans', sans-serif;
font-size: 1.3em;
margin: 38% 0% 0% 14%;
color: #FFF;
}
.ripple-loader:after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border: 2px solid #1a237e;
border-radius: 50%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
-webkit-animation: ripple 1.5s ease-out infinite;
-moz-animation: ripple 1.5s ease-out infinite;
-ms-animation: ripple 1.5s ease-out infinite;
-o-animation: ripple 1.5s ease-out infinite;
animation: ripple 1.5s ease-out infinite;
}
@keyframes ripple{
0%{
width: 100px;
height: 100px;
opacity: 1;
}
96%{
width: 400px;
height: 400px;
opacity: 0;
}
100%{
width: 400px;
height: 400px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="ripple-back" id="ripple-loader">
<div class="ripple-loader"></div>
</div>
</body>
</html>Conclusion
Now you can apply the ripple effect loader to your personal project or website effortlessly. You can also do some creative using ripple effect animations on the website.
I hope you found this post quite impressive and helpful.
Enjoy Designing 🙂
