Skip to content

Instantly share code, notes, and snippets.

@igrek8
Last active March 16, 2018 08:19
Show Gist options
  • Save igrek8/93759f43fcd939ced2ebdc878e5ffc4c to your computer and use it in GitHub Desktop.
Save igrek8/93759f43fcd939ced2ebdc878e5ffc4c to your computer and use it in GitHub Desktop.
The simplest inline-block loader with inherit color
.loader {
color: inherit;
display: inline-block;
cursor: wait;
}
.loader > span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.loader > span:before {
content: "\25cf";
}
.loader > span:nth-child(2) {
animation-delay: 0.2s;
}
.loader > span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
<div class="loader">
<span />
<span />
<span />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment