Skip to content

Instantly share code, notes, and snippets.

@gmcusaro
Created January 25, 2022 21:19
Show Gist options
  • Save gmcusaro/475e571fdc68dde32ab0b318ca2c740e to your computer and use it in GitHub Desktop.
Save gmcusaro/475e571fdc68dde32ab0b318ca2c740e to your computer and use it in GitHub Desktop.
Dot spinner
.spinner {
width: 40px;
height: 40px;
position: relative;
}
.spinner .dot {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.spinner .dot::after {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #000000;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner .dot {
animation: spin 2s infinite;
}
.spinner .dot:nth-child(2) {
animation-delay: 100ms;
}
.spinner .dot:nth-child(3) {
animation-delay: 200ms;
}
.spinner .dot:nth-child(4) {
animation-delay: 300ms;
}
.spinner .dot:nth-child(5) {
animation-delay: 400ms;
}
/*<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment