1. Classic Rotating
.spinner-1 {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin-1 1s linear infinite;
}
@keyframes spin-1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
2. Pulsing Dot
.spinner-2 {
width: 20px;
height: 20px;
background-color: #3498db;
border-radius: 100%;
animation: pulse-2 1.0s ease-in-out infinite alternate;
}
@keyframes pulse-2 {
to {
opacity: 0.1;
transform: scale(0.2);
}
}
3. Bouncing Dots
.spinner-3 {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.spinner-3 div {
display: inline-block;
position: absolute;
left: 8px;
width: 16px;
background: #3498db;
animation: bounce-3 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.spinner-3 div:nth-child(1) { left: 8px; animation-delay: -0.24s; }
.spinner-3 div:nth-child(2) { left: 32px; animation-delay: -0.12s; }
.spinner-3 div:nth-child(3) { left: 56px; animation-delay: 0; }
@keyframes bounce-3 {
0% { top: 8px; height: 64px; }
50%, 100% { top: 24px; height: 32px; }
}
4. Dual Ring
.spinner-4 {
display: inline-block;
width: 64px;
height: 64px;
}
.spinner-4:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #3498db;
border-color: #3498db transparent #3498db transparent;
animation: dual-ring-4 1.2s linear infinite;
}
@keyframes dual-ring-4 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
5. Ripple Effect
.spinner-5 {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.spinner-5 div {
position: absolute;
border: 4px solid #3498db;
opacity: 1;
border-radius: 50%;
animation: ripple-5 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.spinner-5 div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes ripple-5 {
0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}
6. Facebook Style
.spinner-6 {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.spinner-6 div {
display: inline-block;
position: absolute;
left: 6px;
width: 13px;
background: #3498db;
animation: facebook-6 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.spinner-6 div:nth-child(1) { left: 6px; animation-delay: -0.24s; }
.spinner-6 div:nth-child(2) { left: 26px; animation-delay: -0.12s; }
.spinner-6 div:nth-child(3) { left: 45px; animation-delay: 0; }
@keyframes facebook-6 {
0% { top: 6px; height: 51px; }
50%, 100% { top: 19px; height: 26px; }
}
7. Heart Beat
.spinner-7 {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
transform: rotate(45deg);
transform-origin: 32px 32px;
}
.spinner-7 div {
top: 23px;
left: 19px;
position: absolute;
width: 26px;
height: 26px;
background: #e74c3c;
animation: heart-7 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.spinner-7 div:after, .spinner-7 div:before {
content: '';
width: 26px;
height: 26px;
position: absolute;
left: -17px;
top: -17px;
background: #e74c3c;
border-radius: 50%;
animation: heart-7 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.spinner-7 div:before { left: -17px; top: 0; }
.spinner-7 div:after { left: 0; top: -17px; }
@keyframes heart-7 {
0% { transform: scale(0.95); }
5% { transform: scale(1.1); }
39% { transform: scale(0.85); }
45% { transform: scale(1); }
60% { transform: scale(0.95); }
100% { transform: scale(0.9); }
}
8. Ring
/* Ring Spinner CSS - See styles.css for full implementation */
.spinner-8 { display: inline-block; width: 64px; height: 64px; }
.spinner-8 div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #3498db; border-radius: 50%; animation: ring-8 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #3498db transparent transparent transparent; }
9. Roller
/* Roller Spinner CSS - See styles.css for full implementation */
.spinner-9 { display: inline-block; position: relative; width: 64px; height: 64px; }
/* Multiple div elements with positioned circles - check styles.css */
10. Default
/* Default Spinner - Check styles.css */
11. Hourglass
/* Hourglass Spinner - Check styles.css */
12. Ellipsis
/* Ellipsis Spinner - Check styles.css */
13. Clock
/* Clock Spinner - Check styles.css */
14. Square
/* Square Spinner - Check styles.css */
15. Wave
/* Wave Spinner - Check styles.css */
16. Wandering Cubes
/* Wandering Cubes - Check styles.css */
17. Pulse
/* Pulse Spinner - Check styles.css */
18. Folding Cube
/* Folding Cube - Check styles.css */
19. Double Bounce
/* Double Bounce - Check styles.css */
20. Chasing Dots
/* Chasing Dots - Check styles.css */
21. Three Bounce
/* Three Bounce - Check styles.css */
22. Circle
/* Circle Spinner - Check styles.css */
23. Cube Grid
/* Cube Grid - Check styles.css */
24. WordPress
/* WordPress Spinner - Check styles.css */
25. Fading Circle
/* Fading Circle - Check styles.css */
26. Rotate Plane
/* Rotate Plane - Check styles.css */
27. Infinity
/* Infinity Spinner - Check styles.css */
28. Hexagon
/* Hexagon Spinner - Check styles.css */
29. Pacman
/* Pacman Spinner - Check styles.css */
30. Triangle
/* Triangle Spinner - Check styles.css */
31. DNA
/* DNA Spinner - Check styles.css */
32. Gear
/* Gear Spinner - Check styles.css */
33. Flip
/* Flip Spinner - Check styles.css */
34. Swing
/* Swing Spinner - Check styles.css */
35. Shake
/* Shake Spinner - Check styles.css */
36. Bounce
/* Bounce Spinner - Check styles.css */
37. Flash
/* Flash Spinner - Check styles.css */
38. Rubber
/* Rubber Spinner - Check styles.css */
39. Jello
/* Jello Spinner - Check styles.css */
40. Heartbeat
/* Heartbeat Spinner - Check styles.css */
41. Hinge
/* Hinge Spinner - Check styles.css */
42. Jack
/* Jack Spinner - Check styles.css */
43. Roll
/* Roll Spinner - Check styles.css */
44. Zoom
/* Zoom Spinner - Check styles.css */
45. Slide
/* Slide Spinner - Check styles.css */
46. Light
/* Light Spinner - Check styles.css */
47. Orbit
/* Orbit Spinner - Check styles.css */
48. Morph
/* Morph Spinner - Check styles.css */
49. Neon
/* Neon Spinner - Check styles.css */
50. Matrix
/* Matrix Spinner - Check styles.css */