Fluxon.Components.Loading (Fluxon v1.0.20)

A versatile loading indicator component for displaying loading states and animations.

This component provides a comprehensive solution for indicating loading states across your application. It offers multiple animation styles and customization options while maintaining consistent performance and accessibility. The animations are implemented using SVG and CSS, ensuring smooth performance even during heavy page loads.

Usage

The loading component can be used in its simplest form to indicate loading states:

<.loading />
<.loading variant="ring-bg" />
<.loading variant="dots-bounce" />
<.loading variant="dots-fade" />
<.loading variant="dots-scale" />

Animation Variants

The component offers five distinct animation styles, each designed for specific use cases:

<!-- Simple rotating ring -->
<.loading variant="ring" />

<!-- Ring with background for better visibility -->
<.loading variant="ring-bg" />

<!-- Playful bouncing dots -->
<.loading variant="dots-bounce" />

<!-- Subtle fading dots -->
<.loading variant="dots-fade" />

<!-- Scaling dots for emphasis -->
<.loading variant="dots-scale" />

Each variant is optimized for different contexts:

  • ring: Clean, minimal loading indicator for general use
  • ring-bg: Enhanced visibility with a static background ring
  • dots-bounce: Playful animation for lighter, more casual interfaces
  • dots-fade: Subtle, professional animation for serious applications
  • dots-scale: Eye-catching animation for important loading states

Customization

The component supports customization through CSS classes:

Size Variations

Adjust the size using Tailwind's size utilities:

<.loading class="size-4" />
<.loading class="size-6" />
<.loading class="size-8" />
<.loading class="size-10" />

Color Variations

Change the color using Tailwind's text color utilities:

<.loading class="text-blue-500" />
<.loading class="text-green-500" />
<.loading class="text-red-500" />
<.loading class="text-amber-500" />

Common Use Cases

Button Loading States

Loading indicators can be used within buttons to show processing states:

<.button disabled>
  <.loading class="size-4" /> Loading...
</.button>

<.button variant="solid" color="blue" disabled>
  <.loading class="size-4 text-white" /> Processing
</.button>

Page Loading

For full-page loading states, center the indicator with appropriate sizing:

<div class="flex items-center justify-center min-h-[400px]">
  <.loading class="size-8" />
</div>

Section Loading

For loading specific sections or components:

<div class="relative">
  <div class="absolute inset-0 flex items-center justify-center bg-white/80">
    <.loading class="size-6" />
  </div>
  <!-- Content here -->
</div>

Summary

Components

loading(assigns)

Renders an animated loading indicator with customizable styles and behaviors.

Components

loading(assigns)

Renders an animated loading indicator with customizable styles and behaviors.

This component provides a flexible way to indicate loading states with various animation styles. It supports customization of size, color, animation duration, and visual style while maintaining consistent performance.

Attributes

  • class (:any) - Additional CSS classes to apply to the SVG element. Useful for customizing size and color. Default size is size-5 and color is text-zinc-600.

    Defaults to nil.

  • duration (:integer) - The duration of one complete animation cycle in milliseconds. Affects all animation variants consistently.

    Defaults to 600.

  • variant (:string) - The animation style to display:

    • ring: Simple rotating ring
    • ring-bg: Rotating ring with background
    • dots-bounce: Bouncing dots sequence
    • dots-fade: Fading dots sequence
    • dots-scale: Scaling dots sequence

    Defaults to "ring".