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>

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

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 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.