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

SKELETON

PreviousSelector
SliderNext
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: product shelf loading state

New arrivals

View all
  • Replacing content while data is loading
  • Reducing perceived wait time with visual placeholders
  • Maintaining layout stability during async operations

Usage Guidelines

DO

Match skeleton shapes to the actual content layout. Use shimmer animation for general loading

Don’t

Don't mix animation modes within the same loading state. Don't use Skeleton for static design previews (use none animation instead)

Accessibility

  • Renders a <div role="status" aria-busy="true"> — screen readers announce this as a live region
  • A visually hidden <span className="sr-only">Loading…</span> provides text for assistive technology
  • The shimmer overlay is aria-hidden="true" — purely decorative
  • Respects prefers-reduced-motion via the global CSS guard