Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

LOADING

PreviousList
MenuNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: order processing overlay

Loading
  • Indicating that an action is being processed (form submission, API call)
  • Inline loading state within buttons or input fields
  • Page or section-level loading overlay

Usage Guidelines

DO

Use Loading as a leading icon inside buttons during async actions. Match the spinner color to its surrounding context using Tailwind text color utilities

Don’t

Don't use Loading as a full-page placeholder — use Skeleton instead. Don't combine multiple Loading spinners in a single view

Accessibility

  • Renders <svg role="status" aria-label="Loading…"> — screen readers announce the loading state
  • The label prop allows customizing the accessible name per context (e.g. "Submitting form…")
  • Arc uses currentColor — inherits contrast from the parent's text color