Syntax - Web Development Podcast

Making SVG Loading Spinners: An Interactive Guide

SVG spinners: you've seen them all over, giving us as a visual cue when elements are loading or data is being fetched. They are practical, scalable, and can enhance user experience. This guide will walk you through how they can be implemented using only a few simple SVG attributes like stroke-dasharray and stroke-dashoffset.

✨🔗 For a deeper understanding of the different SVG attributes, check out the SVG reference.

Drawing a Circle

We start by defining our workspace. The viewBox attribute controls the coordinate system. Here, 0 0 800 800 sets the origin at the top-left corner with a width and height of 800 units each.

We then create a circle element. The cx and cy attributes position the center of the circle at 400 units along both the x and y axes. A radius (r) of 200 units and a stroke width of 40 units give it a bold appearance. fill="none" ensures the circle is hollow, forming the basic shape of our spinner.

stroke:

      

stroke-dasharray to make the circle incomplete

stroke-dasharray is a powerful attribute that controls the pattern of dashes and gaps in a shape's stroke.

For example, a value of 600 200 would mean dash of 600 units followed by a gap of 200 units. More than 2 values can be provided. A value of 600 200 400 100 would mean pattern consisting of a dash of 600 units, a gap of 200 units, a dash of 400 units and a gap of 100 units. The pattern of dashes and gaps repeats itself to fill up the entire shape's stroke length.

In the following example we set a large value for the gap, ensuring that only one dash will show. At a value of 0 for the dash, we get nothing visible (the gap takes up all the visible stroke), and at a value of 1257 (given a radius of 200) we get a full circle again. That's because the math for the circumference of a circle is 2 * π * radius (2 * 3.1416 * 200 = 1,256.64)


      

stroke-linecap for round linecaps

The round linecap adds a smooth finish to the stroke ends:


      

stroke-dashoffset to control where our dash starts

The stroke-dashoffset attribute allows us to offset the start of our dash:


      

Rotate the Circle Using CSS

Just a simple CSS animation to make our circle spin around its center continuously:


      

Animate stroke-dasharray

We can also animate the values for the stroke-dasharray attribute:


      

Swirling Effect

For this final example the animating dasharray and dashoffset values create a dynamic swirling effect:


      

SVG generators, tools & design resources

cccolor
HEX, RGB & HSL color picker

pppalette
color palette generator

hhhue
curated color palettes

ssshape
SVG blob generator

llline
SVG line generator

dddepth
AI-generated 3D shapes

sssvg
SVG reference

ffflux
fluid SVG gradients

tttexture
grunge textures

nnnoise
noise texture generator

aaabstract
abstract backgrounds

rrrepeat
repeating SVG shapes

wwwatercolor
watercolor backgrounds

hhholographic
holographic backgrounds

mmmotif
SVG patterns with a 3D feel

gggrain
grainy gradient generator

uuunion
mesh-like gradient generator

nnneon
glowing SVG shapes

ccclaymoji
emoji maker

iiisometric
isometric design builder

sssurf
SVG wave generator

qqquad
generative patterns

dddraw
freehand SVG drawing tool

pppointed
SVG arrow maker

cccloud
cloud SVGs

ssstar
star SVGs

lllove
heart SVGs

bbblurry
blurry background shapes

uuundulate
make some SVG ripples

ccchaos
wild wavy SVG shapes

oooscillate
curvy line patterns

ffflurry
make it rain, SVG-style

cccoil
SVG spiral waves

ssspiral
SVG spiral patterns

cccircular
SVG gradient circle patterns

rrreplicate
SVG line pattern generator

tttwinkle
bursting line patterns

ssscales
gradient SVG patterns

rrrainbow
colorful background patterns

ttten
10 Print-inspired pattern generator

ssscribble
make SVG scribbles

pppixelate
pixel art patterns

sssquiggly
wavy line patterns

ooorganize
SVG grid patterns

vvvortex
spinning circle patterns

gggyrate
spinning geometric patterns

llleaves
organic SVG backgrounds

ggglitch
glitchy shapes

ppperspective
shapes that vanish

sssurface
SVG circles that feel 3D

hhhorizon
Cyberpunk-style backgrounds

sssplatter
make funky SVG shapes

ssspill
generate melting SVGs

ssspot
organic speck patterns

wwwhirl
twisting line patterns

rrreflection
SVG circle patterns

bbburst
confetti generator

dddynamite
decorative SVG shapes

dddivided
split SVG shapes

lllook
fun line icons

dddoodle
hand-drawn doodles

pppsychedelic
psychedelic backgrounds

rrrasterize
convert SVG to PNG

eeencode
encode SVG to Base64

rrready?
support chart for web features

CSS Selectors
A Visual Guide

Pick + Convert colors

CCCOLOR

A simple color picker app for Mac, Windows & Linux

Get it here