.pulsing_overlap {
position: relative;
display: inline-block;
width: 10px;
height: 20px;
margin-left: -10px;
}
.pulsing_overlap_small {
position: relative;
display: inline-block;
width: 15px;
height: 10px;
margin-left: -20px;
}
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 3px;
height: 3px;
}
.pulsating-circle:before {
content: "";
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #fd8686;
-webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1)
infinite;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s
infinite;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@-webkit-keyframes pulse-ring {
0% {
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
80%,
100% {
opacity: 0;
}
}
@keyframes pulse-ring {
0% {
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
80%,
100% {
opacity: 0;
}
}
@-webkit-keyframes pulse-dot {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes pulse-dot {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}