<div class="availability-wrap">
<div class="availability"></div>
</div>
================CSS=======================
.availability-wrap {
margin-left: 250px;
height: 200px;
width: 200px;
box-shadow: 10px 40px 60px -20px rgba(0,0,0,0.2);
}
.availability {
width: 50px;
height: 50px;
background: rgba(195, 13, 189, 0.23);
border-radius: 50%;
position: relative;
margin: 40px;
display: inline-block;
}
.availability:before, .availability:after {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #c30dbd;
position: absolute;
animation: pulse 3s linear infinite;
opacity: 1;
}
@keyframes pulse {
0%
{transform: scale(0);
opacity: 1;}
100%
{transform: scale(1.3);
opacity: 0;}
}