<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="container">
<div class="wrapper">
<div class="ripple_circle">
<div id="ripple"></div>
<div id="ripple2"></div>
<div id="ripple3"></div>
</div>
</div>
</div>
body{
background: -webkit-gradient(linear,left top,right top,from(#A34FFE),to(#5934FC));
}
.wrapper {
overflow: hidden;
width: 400px;
height: 400px;
background-color: #FFF;
border-radius: 100%;
margin: 50px auto;
}
.ripple_circle{
z-index: 1;
position: relative;
width: 340px;
height: 340px;
background: -webkit-radial-gradient(circle,#FDC800,#FF4137);
background: -moz-radial-gradient(circle,#FDC800,#FF4137);
background: -o-radial-gradient(circle,#FDC800,#FF4137);
background: radial-gradient(circle,#FDC800,#FF4137);
top: 30px;
left: 30px;
border-radius: 100%;
-webkit-box-shadow: -2px 3px 26px 0 #FF4137;
box-shadow: -2px 3px 26px 0 #FF4137;
}
#ripple, #ripple2, #ripple3 {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.4);
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.4);
box-shadow: 0 0 20px rgba(255,255,255,.4);
position: absolute;
bottom: 50%;
margin-bottom: -326px;
right: 50%;
margin-right: -326px;
-webkit-animation: shrink 5s linear infinite;
-moz-animation: shrink 5s linear infinite;
-o-animation: shrink 5s linear infinite;
animation: shrink 5s linear infinite;
z-index: 0;
background: rgba(255,255,255,.4);
}
#ripple {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
#ripple2 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#ripple3 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes shrink {
0% {
margin-bottom: 0;
margin-right: 0;
width: 0;
height: 0;
opacity: 0
}
10% {
opacity: .5
}
30% {
opacity: .3
}
60% {
opacity: 0
}
100% {
margin-bottom: -326px;
margin-right: -326px;
width: 650px;
height: 650px;
opacity: 0
}
}
@-moz-keyframes shrink {
0% {
margin-bottom: 0;
margin-right: 0;
width: 0;
height: 0;
opacity: 0
}
10% {
opacity: .5
}
30% {
opacity: .3
}
60% {
opacity: 0
}
100% {
margin-bottom: -326px;
margin-right: -326px;
width: 650px;
height: 650px;
opacity: 0
}
}
@-o-keyframes shrink {
0% {
margin-bottom: 0;
margin-right: 0;
width: 0;
height: 0;
opacity: 0
}
10% {
opacity: .5
}
30% {
opacity: .3
}
60% {
opacity: 0
}
100% {
margin-bottom: -326px;
margin-right: -326px;
width: 650px;
height: 650px;
opacity: 0
}
}
@keyframes shrink {
0% {
margin-bottom: 0;
margin-right: 0;
width: 0;
height: 0;
opacity: 0
}
10% {
opacity: .5
}
30% {
opacity: .3
}
60% {
opacity: 0
}
100% {
margin-bottom: -326px;
margin-right: -326px;
width: 650px;
height: 650px;
opacity: 0
}
}
