15 Pure CSS Loading Animations 12 / 15
Neon Ring Draw
A glowing ring spinner with a layered neon box-shadow creates a vivid electric glow as it spins.
The code
<div class="neon-ring"></div>
<div class="neon-ring"></div>.neon-ring {
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #2ecc8a;
box-shadow:
0 0 14px #2ecc8a,
0 0 28px rgba(46, 204, 138, 0.35);
animation: nring 0.9s linear infinite;
}
.neon-ring::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: rgba(46, 204, 138, 0.3);
box-sizing: border-box;
}
@keyframes nring {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.neon-ring,
.neon-ring * {
animation: none !important;
}
}
.neon-ring {
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #2ecc8a;
box-shadow:
0 0 14px #2ecc8a,
0 0 28px rgba(46, 204, 138, 0.35);
animation: nring 0.9s linear infinite;
}
.neon-ring::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: rgba(46, 204, 138, 0.3);
box-sizing: border-box;
}
@keyframes nring {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.neon-ring,
.neon-ring * {
animation: none !important;
}
}