Components Loading

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Loading

Loading indicators help inform the user of the current status.
Spinner
heex 
          <.spinner show={false} />
<.spinner show={true} size="sm" />
<.spinner size="md" class="text-primary-500" />
<.spinner size="lg" class="text-secondary-500" />
Properties
elixir 
            # <.loading>
  attr(:size, :string, default: "sm", values: ["sm", "md", "lg", "xl", "full"], doc: "size of the spinner")
  attr(:size_class, :string, default: nil, doc: "custom CSS classes for size. eg: h-4 w-4")
  attr(:class, :string, default: nil, doc: "CSS class")
  attr(:show, :boolean, default: true, doc: "show or hide spinner")
  attr(:rest, :global)