100+ Open-source Animated SVG Loading Spinners

SVG Spinners is an open-source project that provides a collection of over 100 animated, SVG-based loading spinners for your modern web design. You can embed them into your projects as an inline SVG or use them with the <img> tag.

These loading spinners can be useful when real-time feedback is essential, such as during data fetching, page transitions, or when performing complex calculations on the client side. Developers can keep users informed about ongoing processes, reducing frustration caused by unexpected delays.

How to use it:

1. Download the package that contains all the loading indicators. This will give you access to over 100 SVG files, each representing a different loading spinner.

2. Choose a preferred indicator and embed it using the <svg> or <image> tag:

<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="3" r="1"><animate id="spinner_7Z73" begin="0;spinner_tKsu.end-0.5s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="16.50" cy="4.21" r="1"><animate id="spinner_Wd87" begin="spinner_7Z73.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="7.50" cy="4.21" r="1"><animate id="spinner_tKsu" begin="spinner_9Qlc.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="19.79" cy="7.50" r="1"><animate id="spinner_lMMO" begin="spinner_Wd87.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="4.21" cy="7.50" r="1"><animate id="spinner_9Qlc" begin="spinner_Khxv.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="21.00" cy="12.00" r="1"><animate id="spinner_5L9t" begin="spinner_lMMO.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="3.00" cy="12.00" r="1"><animate id="spinner_Khxv" begin="spinner_ld6P.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="19.79" cy="16.50" r="1"><animate id="spinner_BfTD" begin="spinner_5L9t.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="4.21" cy="16.50" r="1"><animate id="spinner_ld6P" begin="spinner_XyBs.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="16.50" cy="19.79" r="1"><animate id="spinner_7gAK" begin="spinner_BfTD.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="7.50" cy="19.79" r="1"><animate id="spinner_XyBs" begin="spinner_HiSl.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><circle cx="12" cy="21" r="1"><animate id="spinner_HiSl" begin="spinner_7gAK.begin+0.1s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.37,.99;.53,0,.61,.73"></animate></circle><animateTransform attributeName="transform" type="rotate" dur="6s" values="360 12 12;0 12 12" repeatCount="indefinite"></animateTransform></g></svg>

3. Customize the spinner colors by changing the fill or stroke attribute directly within the <svg> tag, or setting the parent element’s text color, which the SVG will inherit.

<svg fill="#000000" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

4. All available loading spinners:

• 12-dots-scale-rotate.svg
• 180-ring-with-bg.svg
• 180-ring.svg
• 270-ring-with-bg.svg
• 270-ring.svg
• 3-dots-bounce.svg
• 3-dots-fade.svg
• 3-dots-move.svg
• 3-dots-rotate.svg
• 3-dots-scale-middle.svg
• 3-dots-scale.svg
• 4-dots-goeey.svg
• 4-dots-rotate.svg
• 6-dots-rotate.svg
• 6-dots-scale-middle.svg
• 6-dots-scale.svg
• 8-dots-rotate-scale.svg
• 8-dots-rotate.svg
• 90-ring-with-bg.svg
• 90-ring-with-gradient.svg
• 90-ring.svg
• audio.svg
• ball-triangle.svg
• bars-fade.svg
• bars-rotate-fade.svg
• bars-scale-fade.svg
• bars-scale-middle.svg
• bars-scale.svg
• bars.svg
• blocks-scale.svg
• blocks-shuffle-2.svg
• blocks-shuffle-3.svg
• blocks-shuffle-4.svg
• blocks-shuffle-5.svg
• blocks-wave.svg
• bouncing-ball.svg
• circle-fade.svg
• circles.svg
• clock.svg
• cog01.svg
• cog02.svg
• cog03.svg
• cog04.svg
• cog05.svg
• cog06.svg
• cog07.svg
• cog08.svg
• cog09.svg
• cog10.svg
• cog11.svg
• cog12.svg
• cog13.svg
• cog14.svg
• cog15.svg
• cog16.svg
• cog17.svg
• cog18.svg
• cog19.svg
• cog20.svg
• cog21.svg
• cog22.svg
• cog23.svg
• cog24.svg
• dot-revolve.svg
• eclipse-half.svg
• eclipse.svg
• gooey-balls-1.svg
• gooey-balls-2.svg
• grid.svg
• heart-pulse-2.svg
• heart-pulse-3.svg
• heart-pulse.svg
• hearts.svg
• horizontal-bar.svg
• jump.svg
• loader-wifi.svg
• loader1.svg
• loader10.svg
• loader2.svg
• loader3.svg
• loader4.svg
• loader5.svg
• loader6.svg
• loader7.svg
• loader8.svg
• loader9.svg
• oval.svg
• pacman.svg
• puff.svg
• pulse-3.svg
• pulse-multiple.svg
• pulse-ring.svg
• pulse-rings-2.svg
• pulse-rings-3.svg
• pulse-rings-multiple.svg
• pulse.svg
• pulse2.svg
• ring-resize.svg
• rings.svg
• spinner-double.svg
• spinner-multiple-2.svg
• spinner-multiple.svg
• spinner.svg
• spinning-circles.svg
• square.svg
• svgo.config.cjs
• tadpole.svg
• tail-spin.svg
• wifi-fade.svg
• wifi.svg
• wind-toy.svg