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>
      <title>Ripple Effect With CSS</title>
         .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{
         width: 100px;
         height: 100px;
         opacity: 1;
         width: 400px;
         height: 400px;
         opacity: 0;
         width: 400px;
         height: 400px;
         opacity: 0;
      <div class="ripple-back" id="ripple-loader">
         <div class="ripple-loader"></div>

Read Also: How to Change Button Color on Hover Using CSS


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 πŸ™‚

Leave a Reply

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

Read previous post:
what is $globals
What Is GLOBALS in PHP, and How to Use $GLOBALS in PHP

Global is used to declare a superglobal variable that can be accessed in all scopes. What is $GLOBALS in PHP?...