Skip to content

Loading

Loading indicators show progress and loading states with smooth animations.

Overview

VetraLoading provides multiple loading indicator types:

  • Smooth, continuous animations
  • Multiple size variants
  • Customizable colors
  • Minimal CPU usage
  • Elegant motion design
VetraLoadingSpinner()

Variants

Circular spinner with smooth rotation.

VetraLoadingSpinner()

Three animated dots that bounce in sequence.

VetraLoadingDots()

Concentric circles that pulse outward.

VetraLoadingPulse()

Linear progress bar for determinate or indeterminate progress.

VetraLinearProgress(progress = 0.5f)

Centered loading indicator with optional message.

VetraFullScreenLoading(message = "Loading...")

Common Patterns

Button Loading State

VetraButton(
    onClick = { },
    enabled = !isLoading
) {
    if (isLoading) {
        VetraLoadingSpinner(size = LoadingSize.SMALL, color = VetraTheme.colors.onBrand)
        Spacer(Modifier.width(8.dp))
    }
    Text(if (isLoading) "Loading..." else "Submit")
}

Inline Loading

if (isLoading) {
    VetraLoadingSpinner(size = LoadingSize.MEDIUM)
} else {
    Content()
}

Progress Bar

// Indeterminate
VetraLinearProgress()

// Determinate
VetraLinearProgress(progress = uploadProgress)

Full Screen Loading

if (isLoading) {
    VetraFullScreenLoading(
        message = "Loading content...",
        loadingType = LoadingType.SPINNER
    )
} else {
    Content()
}

Custom Colors

VetraLoadingSpinner(
    color = VetraTheme.colors.accent,
    size = LoadingSize.LARGE
)

Best Practices

Do

  • ✅ Show loading states for async operations
  • ✅ Use appropriate indicator type
  • ✅ Provide context when helpful
  • ✅ Use determinate progress when possible
  • ✅ Keep animations smooth

Don't

  • ❌ Show loading for instant operations
  • ❌ Use multiple loading indicators simultaneously
  • ❌ Block user interaction unnecessarily
  • ❌ Make loading indicators too large

Accessibility

  • Screen Readers: Proper announcements
  • Animation: Respects reduced motion preferences
  • Color Contrast: Meets WCAG AA standards

API Reference

VetraLoadingSpinner

Parameter Type Default Description
modifier Modifier Modifier Modifier for customization
size LoadingSize MEDIUM Size variant
color Color VetraTheme.colors.brand Spinner color
strokeWidth Dp? null Optional stroke width

VetraLoadingDots

Parameter Type Default Description
modifier Modifier Modifier Modifier for customization
color Color VetraTheme.colors.brand Dots color
dotSize Dp 8.dp Size of each dot
spacing Dp 8.dp Spacing between dots

VetraLoadingPulse

Parameter Type Default Description
modifier Modifier Modifier Modifier for customization
size LoadingSize MEDIUM Size variant
color Color VetraTheme.colors.brand Pulse color

VetraLinearProgress

Parameter Type Default Description
modifier Modifier Modifier Modifier for customization
progress Float? null Progress (0f-1f), null for indeterminate
color Color VetraTheme.colors.brand Progress color
trackColor Color VetraTheme.colors.borderSubtle Track color
height Dp 4.dp Progress bar height

VetraFullScreenLoading

Parameter Type Default Description
modifier Modifier Modifier Modifier for customization
message String? null Optional loading message
loadingType LoadingType SPINNER Type of loading indicator

LoadingSize

  • SMALL - 24dp
  • MEDIUM - 40dp (default)
  • LARGE - 56dp
  • XLARGE - 72dp

See Also: