CSS Spinners of all Shapes and Sizes
A Bespoke Collection 31 May 2023
Let’s spin round and round！ (*´∀`)♪
Design Constraints
I have restricted myself to only loading spinners that require a single html div. In addition, excepting the last one, all of the spinners don’t depend on the page background color. I have also assumed a relatively modern browser in order to keep the required CSS clean, short, and free of ugly hacks.
Minimal viable spinner
View Code
.minimal1 {
width: 50px;
height: 50px;
border: 7px solid;
border-color: #888 transparent transparent;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Double whirl
View Code
.minimal {
width: 50px;
height: 50px;
border: 7px solid;
border-color: transparent #888;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Pinwheel
View Code
.pinwheel {
width: 0px;
height: 0px;
border: 20px solid;
border-color: transparent #888;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Beachball
View Code
.beachball {
width: 0px;
height: 0px;
border: 20px solid;
border-color: #da0000 #e7e700 #00ad00 #0250ff;
border-radius: 100%;
animation: spinmultiple 2s infinite ease-in-out;
}
@keyframes spinmultiple {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1440deg);
}
}
Comet
View Code
.whirlpool {
width: 50px;
height: 50px;
border: 7px solid;
border-style: solid solid none none;
border-color: #888 transparent transparent ;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Whirlpool
View Code
.whirlpool2 {
width: 50px;
height: 50px;
border-width: 7px 7px 0 7px;
border-style: solid solid solid solid;
border-color: #888 transparent transparent #888 ;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Spinning on track
View Code
.track {
width: 50px;
height: 50px;
border: 7px solid;
border-color: #888 #88888822 #88888822;
border-radius: 100%;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Flash
loading...
View Code
.blinker {
display: inline-block;
animation: blinkanimation 1.7s infinite ease-in-out;
font-size: 20px;
}
@keyframes blinkanimation {
0%, 100% {
opacity: 0.2;
}
50% {
opacity: 0.8;
}
}
Triple fade
View Code
.triplefade {
display: block;
width: 20px;
height: 20px;
background: #0000;
border-radius: 50%;
animation: triplefader 1s infinite ease-in-out;
}
@keyframes triplefader {
0%, 100% {
box-shadow: #8880 30px 0, #8880 60px 0, #8880 90px 0;
}
30% {
box-shadow: #888f 30px 0, #8880 60px 0, #8880 90px 0;
}
50% {
box-shadow: #888f 30px 0, #888f 60px 0, #8880 90px 0;
}
80% {
box-shadow: #888f 30px 0, #888f 60px 0, #888f 90px 0;
}
}
Triple Bounce
View Code
.quadbounce {
display: block;
width: 20px;
height: 20px;
background: #0000;
border-radius: 50%;
animation: quadbouncer 1s infinite ease-in-out;
}
@keyframes quadbouncer {
0%, 100% {
box-shadow: #888f 30px 0, #888f 60px 0, #888f 90px -5px;
}
30% {
box-shadow: #888f 30px -10px, #888f 60px 0, #888f 90px 0;
}
50% {
box-shadow: #888f 30px -5px, #888f 60px -10px, #888f 90px 0;
}
80% {
box-shadow: #888f 30px 0, #888f 60px -5px, #888f 90px -10px;
}
}
Thinking Rectangles Ripple
View Code
.rectripple, .rectripple:before, .rectripple:after {
height: 10px;
margin-bottom: 30px;
background: #8888;
border-radius: 2px;
animation: rectrippler 1.5s infinite ease-in-out;
}
.rectripple:before, .rectripple:after {
content: "";
position: relative;
display: block;
left: 0px;
top: 20px;
animation-delay: 0.2s;
}
.rectripple:after {
left: 0px;
top: 0px;
display: block;
animation-delay: 0.4s;
}
@keyframes rectrippler {
0%, 80%, 100% {
width: 70px;
}
50% {
width: 100px;
}
}
Dots
View Code
.dots {
margin: 50px;
width: 10px;
height: 10px;
background: transparent;
border-radius: 100%;
box-shadow: #888 20px 20px,
#888 -20px -20px,
#888 20px -20px,
#888 -20px 20px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Dots Extra
View Code
.dotsExtra {
margin: 50px;
width: 10px;
height: 10px;
background: transparent;
border-radius: 100%;
box-shadow: #888 20px 20px,
#888 -20px -20px,
#888 20px -20px,
#888 -20px 20px,
#888 0 27px,
#888 27px 0,
#888 -27px 0,
#888 0 -27px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Dazzling spinner of many colors
View Code
.dotsDazzle {
margin: 50px;
width: 10px;
height: 10px;
background: transparent;
border-radius: 100%;
box-shadow: red 20px 20px,
orange -20px -20px,
#e7e700 20px -20px,
green -20px 20px,
blue 0 27px,
purple 27px 0,
indigo -27px 0,
crimson 0 -27px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Flip
View Code
.flip {
margin: 50px;
width: 50px;
height: 50px;
background: #888;
border-radius: 100%;
animation: flip 1s infinite ease-in-out;
}
@keyframes flip {
0%, 100% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
}
Flip Colors
View Code
.flipcolors {
margin: 50px;
width: 50px;
height: 50px;
background: #aa6;
border-radius: 100%;
animation: flip 1s infinite ease-in-out, colors 2s infinite steps(1);
}
@keyframes flip {
0%, 100% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
}
@keyframes colors {
0%, 100% {
background: #44f;
}
50% {
background: #f44;
}
}
Timepiece
View Code
.times {
width: 50px;
height: 50px;
border: 5px solid #8888;
border-radius: 100%;
animation: spin 2s infinite linear;
}
.times:after {
width: 18px; height: 4px;
border-radius: 50%;
content: "";
display: block;
position: absolute;
background: #888;
margin-top: 18px;
margin-left: 20px;
}
.times:before {
width: 6px; height: 6px;
border: 2px solid #888;
background: #eee;
content: "";
display: block;
position: absolute;
margin: auto;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Emoji Spin
⚙️
View Code
.emoji {
display: inline-block;
animation: spin 2s infinite linear;
font-size: 40px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Emoji Flip
🤔
View Code
.emojiflip {
display: inline-block;
animation: flipy 2s infinite ease-in-out;
font-size: 40px;
opacity: 0.5;
}
@keyframes flipy {
0%, 100% {
transform: rotate3d(0,0,0,0);
}
50% {
transform: rotate3d(0,1,0,180deg);
}
}
Emoji Bounce
❤️
View Code
.emojibounce {
display: inline-block;
animation: bounce 1s infinite ease-in-out;
font-size: 40px;
opacity: 0.5;
}
@keyframes bounce {
0%, 100% {
transform: scale(1.2);
}
50% {
transform: scale(0.9);
}
}
Emoji Rock
🚀
View Code
.emojitremble {
display: inline-block;
animation: tremble 1s infinite ease-in-out;
font-size: 40px;
}
@keyframes tremble {
0%, 100% {
transform: rotate(0);
}
50% {
transform: rotate(-10deg);
}
}
Space
View Code
.sol {
margin: 90px;
width: 10px;
height: 10px;
background: yellow;
border-radius: 100%;
box-shadow: red 50px 50px 0 0;
animation: spin 10s infinite linear;
}
.sol:after {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
background: #ffc;
border-radius: 100%;
box-shadow: aqua 30px 30px, yellow 0 0 10px, yellow 0 0 10px;
animation: spin 5s infinite linear;
}
.sol:before {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
background: blue;
border-radius: 100%;
box-shadow: green 20px 20px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Faded swipe
View Code
.fadedSwipe {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(to right, #888 10%, #88888800 42%);
animation: spin 1.4s infinite linear;
transform: translateZ(0);
}
.fadedSwipe:before {
width: 50%;
height: 50%;
background: #888;
border-radius: 100% 0 0 0;
display: block;
content: '';
}
.fadedSwipe:after {
background: white;/*background*/
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}