Loader

Implemented Feedback

Animated spinner in three sizes.

Kumo reference: kumo-ui.com/components/loader/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Default

Show template

{% load wdj %}
{% include "wdj/components/loader.html" only %}

Small

Show template

{% load wdj %}
{% include "wdj/components/loader.html" with size="sm" only %}

Large

Show template

{% load wdj %}
<div class="flex items-center gap-4">
  {% include "wdj/components/loader.html" with size="sm" only %}
  {% include "wdj/components/loader.html" only %}
  {% include "wdj/components/loader.html" with size="lg" only %}
</div>

Subtle

Show template

{% load wdj %}
{% include "wdj/components/loader.html" with class="text-kumo-subtle" only %}

API Reference

Prop	Type	Default	Description
size	sm \| base \| lg \| positive number	base	Size; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract