How to Create Ripple Effect Loader Using CSS

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>

I hope you found this post quite impressive and helpful.

Enjoy Designing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *