iMessage Typing Indicator
HTML
<div class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
SCSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.typing-indicator {
$ti-color-bg: #E6E7ED;
background-color: $ti-color-bg;
width: auto;
border-radius: 50px;
padding: 20px;
display: table;
margin: 0 auto;
position: relative;
animation: 2s scaleit infinite ease-out;
&::before,
&::after {
content: '';
position: absolute;
bottom: -2px;
left: -2px;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: $ti-color-bg;
}
&::after {
height: 10px;
width: 10px;
left: -10px;
bottom: -10px;
}
span {
height: 15px;
width: 15px;
float: left;
margin: 0 1px;
background-color: #9E9EA1;
display: block;
border-radius: 50%;
opacity: 0.4;
@for $i from 1 through 3 {
&:nth-of-type(#{$i}) {
animation: 1s blink infinite ($i * .3333s);
}
}
}
}
@keyframes blink {
50% {
opacity: 1;
}
}
@keyframes scaleit {
50% {
transform: scale(1.05);
}
}
