<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="pulse-icon"> <div class="pulse one"></div> <div class="pulse two"></div> <div class="pulse three"></div> </div>

html,body { margin: 50px; background: brown } .pulse-icon { position: relative; } .pulse-icon .pulse { position: absolute; animation: grow-circles .8s linear infinite both; border-radius: 50%; } .pulse-icon .one { border: solid 1px rgba(255,255,255,0.25); width: 200px; height: 200px; top: -70px; left: -70px; } .pulse-icon .two { border: solid 1px rgba(255,255,255,0.35); width: 300px; height: 300px; top: -120px; left: -120px; } .pulse-icon .three { border: solid 1px rgba(255,255,255,0.45); width: 400px; height: 400px; top: -170px; left: -170px; } // SCSS .pulse-icon { position: relative; .pulse { position: absolute; @include circle; animation: pulse-wave 4s linear infinite both; } .one { border: solid 1px rgba($primary,0.25); top: -70px; left: -70px; @include box(200px); } .two { border: solid 1px rgba($primary,0.35); top: -120px; left: -120px; @include box(300px); } .three { border: solid 1px rgba($primary,0.45); top: -170px; left: -170px; @include box(400px); } } @keyframes pulse-wave { 0%{ opacity: 0; transform: scale(0.1); } 50%{ opacity: 1; transform: scale(0.5); } 100%{ opacity: 0; transform: scale(1.0); } } @keyframes grow-circles { 0%{ opacity: 0.85; transform: scale(1.0); } 15%{ opacity: 1; transform: scale(1.05); } 30%{ opacity: 0.85; transform: scale(1.0); } } @keyframes grow-shrink { 0%{transform: scale(1);} 15%{transform: scale(1.1);} 30%{transform: scale(1);} }