Skip to content

Instantly share code, notes, and snippets.

@LauLaman
Created July 11, 2023 08:42
Show Gist options
  • Save LauLaman/8ef42b45134cc082042da5e6cd65b643 to your computer and use it in GitHub Desktop.
Save LauLaman/8ef42b45134cc082042da5e6cd65b643 to your computer and use it in GitHub Desktop.
Spinning loader HTML
<div class="spinner"></div>
<style>
.spinner {
width: 56px;
height: 56px;
border-radius: 50%;
border: 9px solid #f7941e;
animation: spinner-bulqg1 0.8s infinite linear alternate,
spinner-oaa3wk 1.6s infinite linear;
}
@keyframes spinner-bulqg1 {
0% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
}
50% {
clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
62.5% {
clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
75% {
clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
}
100% {
clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
}
}
@keyframes spinner-oaa3wk {
0% {
transform: scaleY(1) rotate(0deg);
}
49.99% {
transform: scaleY(1) rotate(135deg);
}
50% {
transform: scaleY(-1) rotate(0deg);
}
100% {
transform: scaleY(-1) rotate(-135deg);
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment