Loading indicators Rails Components
Visual feedback indicators to show users that content is loading or processing. Built with Tailwind CSS and SVGs.
Examples
Circular spinner
A classic circular loading spinner with a rotating arc. Perfect for general loading states.
<div class="flex items-center justify-center p-8">
<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin size-8 text-neutral-800 dark:text-neutral-200" width="18" height="18" viewBox="0 0 18 18">
<g fill="currentColor">
<path d="m9,17c-4.4111,0-8-3.5889-8-8S4.5889,1,9,1s8,3.5889,8,8-3.5889,8-8,8Zm0-14.5c-3.584,0-6.5,2.916-6.5,6.5s2.916,6.5,6.5,6.5,6.5-2.916,6.5-6.5-2.916-6.5-6.5-6.5Z" opacity=".4" stroke-width="0"></path>
<path d="m16.25,9.75c-.4141,0-.75-.3359-.75-.75,0-3.584-2.916-6.5-6.5-6.5-.4141,0-.75-.3359-.75-.75s.3359-.75.75-.75c4.4111,0,8,3.5889,8,8,0,.4141-.3359.75-.75.75Z" stroke-width="0"></path>
</g>
</svg>
</div>Stepped animation loader
A stylish loader variant with a stepped animation.
<div class="flex items-center justify-center p-8">
<svg xmlns="http://www.w3.org/2000/svg" class="size-8 animate-spin [animation-timing-function:steps(8)] [animation-duration:0.8s]" width="18" height="18" viewBox="0 0 18 18">
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
<line x1="9" y1="1.75" x2="9" y2="4.25" opacity=".13"></line>
<line x1="14.127" y1="3.873" x2="12.359" y2="5.641" opacity=".25"></line>
<line x1="16.25" y1="9" x2="13.75" y2="9" opacity=".38"></line>
<line x1="14.127" y1="14.127" x2="12.359" y2="12.359" opacity=".5"></line>
<line x1="9" y1="16.25" x2="9" y2="13.75" opacity=".63"></line>
<line x1="3.873" y1="14.127" x2="5.641" y2="12.359" opacity=".75"></line>
<line x1="1.75" y1="9" x2="4.25" y2="9" opacity=".88"></line>
<line x1="3.873" y1="3.873" x2="5.641" y2="5.641"></line>
</g>
</svg>
</div>Dots loader
A playful bouncing dots animation. Great for minimal interfaces and inline loading states.
<div class="flex items-center justify-center p-8">
<div class="flex space-x-1.5">
<div class="size-1.5 bg-neutral-800 dark:bg-neutral-200 rounded-full animate-bounce" style="animation-delay: 0ms;"></div>
<div class="size-1.5 bg-neutral-800/80 dark:bg-neutral-200/80 rounded-full animate-bounce" style="animation-delay: 150ms;"></div>
<div class="size-1.5 bg-neutral-800/60 dark:bg-neutral-200/60 rounded-full animate-bounce" style="animation-delay: 300ms;"></div>
</div>
</div>Usage
These spinners can be easily customized by adjusting the Tailwind to change the size & colors of the loader.