Skip to content

Instantly share code, notes, and snippets.

@GGrassiant
Last active November 26, 2021 19:20
Show Gist options
  • Save GGrassiant/3060f11fc94ac032880744d90ed0a86d to your computer and use it in GitHub Desktop.
Save GGrassiant/3060f11fc94ac032880744d90ed0a86d to your computer and use it in GitHub Desktop.
Easy spinner

Easy spinner from nextjs

.spinner {
margin: 12px;
width: 28px;
height: 28px;
animation: spinner-rotating 1.2s infinite;
animation-timing-function: steps(12, end);
}
.spinner:before {
content: '';
display: block;
width: 4px;
height: 4px;
margin: 0;
margin-left: 12px;
border-radius: 50%;
background: #888;
color: #ccc;
box-shadow:
6px 1.61px,
10.39px 6px,
12px 12px,
10.39px 18px,
6px 22.39px,
0 24px,
-6px 1.61px #999,
-10.39px 6px #aaa,
-12px 12px #bbb,
-10.39px 18px,
-6px 22.39px;
}
@keyframes spinner-rotating {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment