Skip to content

Component: Add skeleton screen loader for cards, text blocks, and avatars #17389

Description

@Nareshkumawat-star

Feature Request

Skeleton loaders are a standard modern UX pattern for indicating content is loading. EaseMotion CSS has no skeleton loader component.

Proposed Component

  • Classes: .ease-skeleton, .ease-skeleton--text, .ease-skeleton--card, .ease-skeleton--avatar
  • Shimmer effect using a background linear-gradient that slides left-to-right
  • CSS variables: --ease-skeleton-base, --ease-skeleton-shine, --ease-skeleton-duration
  • Dark mode compatible out of the box
  • No JavaScript required

Files to Create

submissions/examples/ease-skeleton/style.css
submissions/examples/ease-skeleton/demo.html
submissions/examples/ease-skeleton/README.md

Metadata

Metadata

Labels

GSSoC-26Official GSSoC 2026 issuecomponentNew UI components (buttons, cards, modals, tooltips, badges)good first issueGood for newcomersgssoc:approvedApproved for GSSoC contributionshelp wantedExtra attention neededlevel:intermediateRequires moderate project understanding

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions