Loaders/Ripple Effect.html

<html>
  <head>
    <title>Ripple Effect | Loaders</title>
    <style>
      body{
        background-color: #162525;
      }

      #ripple-loader{
        top: 50%;
        left: 50%;
        position: relative;
        margin-top: 20%;
        width:100px;
        height: 100px;
        border-radius: 50%;
      }

      #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 #0EC198;
        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 id="ripple-loader"></div>
  </body>
</html>