# Skeleton

**Path:** Components/Feedback

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Skeleton

 RbSkeleton is a placeholder component that displays a loading state while content is being fetched.
 It provides visual feedback to users, indicating that content is on its way. Supports customizable dimensions,
 shapes (rectangle, rounded, circle), and animations (pulse, wave) to match your UI design.

 Basic Usage

 Simple skeleton placeholders with different dimensions.

 Show code

 Default Skeleton

 A simple skeleton with default width (100%) and height (1rem).

 Custom Dimensions

 Skeletons with various width and height values.

 Text Placeholder

 Multiple skeletons to simulate text paragraphs.

 Shapes

 Different shapes including rectangles, rounded rectangles, and circles.

 Show code

 Rectangle (Default)

 Standard rectangular skeleton with sharp corners.

 Rounded Rectangle

 Skeleton with rounded corners using the Rounded parameter.

 Circle

 Perfect circle skeleton for avatars and icons. Use equal width and height.

 Shape Comparison

 Side-by-side comparison of all shape options.

 Rectangle 

 Rounded 

 Circle 

 Animations

 Available animation options: Pulse, Wave, and None.

 Show code

 Pulse Animation (Default)

 Smooth opacity fade effect. This is the default animation.

 Wave Animation

 Shimmer sweep effect that moves across the skeleton.

 No Animation

 Static skeleton without any animation.

 Animation Comparison

 Side-by-side comparison of all animation options.

 Pulse 

 Wave 

 None 

 Conditional Loading

 Toggle between skeleton and actual content using the Loading parameter.

 Show code

 Toggle Loading State

 Use the Loading parameter to switch between skeleton and actual content.

 Simulate Loading 

 Content Card Loading

 A card that shows skeleton while content loads.

 Simulate Card Loading 

 Real-World Examples

 Practical use cases including user cards, lists, and content placeholders.

 Show code

 User Profile Card

 Skeleton layout for a user profile card.

 List Items

 Skeleton for a list of items with icons.

 Article/Blog Post

 Skeleton for article content with image header.

 Data Table

 Skeleton for table rows.

 Dashboard Stats

 Skeleton for dashboard statistic cards.

 ✕

 Contents