HTML
<div class="row">
<div class="small-centered small-10 medium-8 large-6 columns">
<div class="container">
<div class="dot blue"><span><span></span></span></div>
<div class="dot green"><span><span></span></span></div>
<div class="dot red"><span><span></span></span></div>
<div class="dot orange"><span><span></span></span></div>
</div>
</div>
</div>
SCSS
// variables
$blue: #26B3FF;
$blue-outer: rgba(85,216,232,.4);
$green: #35E861;
$green-outer: rgba(110,255,122,.4);
$red: #FF4B44;
$red-outer: rgba(232,111,112,.4);
$orange: #E87337;
$orange-outer: rgba(255,183,90,.4);
// animations
@mixin keyframes($name, $max-size) {
@keyframes pulse-#{$name} {
0% {
opacity: .75;
transform: scale(1);
}
25% {
opacity: 0.75;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale($max-size);
}
}
}
@include keyframes('2-5', 2.5);
// styles
body {
background-color: rgb(29, 31, 32);
}
.row{
margin-top: 45vh;
}
.container {
display: flex;
justify-content: space-around;
}
h1 {
color: #fff;
}
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
> span {
animation: pulse-2-5 1s linear infinite;
border-radius: 50%;
display: block;
height: 12px;
width: 12px;
> span {
animation: pulse-2-5 1s linear infinite;
border-radius: 50%;
display: block;
height: 12px;
width: 12px;
&:after {
animation: pulse-2-5 1s linear infinite;
border-radius: 50%;
content: '';
display: block;
height: 12px;
width: 12px;
}
}
}
&.blue {
background-color: $blue;
span {
background-color: $blue-outer;
&:after {
background-color: $blue-outer;
}
}
}
&.green {
background-color: $green;
span {
background-color: $green-outer;
&:after {
background-color: $green-outer;
}
}
}
&.red {
background-color: $red;
span {
background-color: $red-outer;
&:after {
background-color: $red-outer;
}
}
}
&.orange {
background-color: $orange;
span {
background-color: $orange-outer;
&:after {
background-color: $orange-outer;
}
}
}
}
