Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
.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 bulge 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 bulge{
50% {
transform: scale(1.05);
}
}
// vertically center demo
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.