Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Versatile & Responsive Skeleton Loader

Improve Perceived Performance with Style

The skeleton component provides a modern way to indicate loading content by simulating the layout of text, images, or videos. It creates a smoother experience by visually preparing users for the actual content, reducing the perceived wait time.

Key Features:

  • Realistic Placeholders: Mimics actual content structure such as lines of text, thumbnails, or cards, making loading feel seamless and intentional.
  • Highly Customizable: Adjust the size, shape, and animation of the skeleton blocks to match the final UI components for a cohesive look.
  • Responsive Design: Adapts to various screen sizes, ensuring consistent loading placeholders on all devices.
  • Simple Integration: Easily add skeleton loaders to your app with minimal effort—just wrap your components or define your own layout template.
  • Enhanced UX: Provides visual feedback during data fetches, reducing bounce rates and keeping users engaged during wait times.

Simple Skeleton

Source Code 

<div class="AnSnPe DyFx FxDnCn Gp5 Wh100p Sl:Wh50p">
    <div class="Ht10 Wh100p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh80p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh90p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh70p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh100p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh50p CrBdGy BrRs10"></div>
    <div class="Ht10 Wh90p CrBdGy BrRs10"></div>
</div>

Image Skeleton

Source Code 

<div class="AnSnPe DyFx FxDnCn Gp5">

    <div class="DyFx FxAnIsCr FxJyCtCr Ht40vh CrBdGy BrRs20 Wh100p Sl:Wh40p">
        <svg class="Wh50 Ht50 CrGy20Lt" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
        </svg>
    </div>
    <div class="DyFx FxDnCn Gp5 MnTp10 Wh100p Sl:Wh40p">
        <div class="Ht10 Wh100p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh80p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh90p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh70p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh100p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh50p CrBdGy BrRs10"></div>
        <div class="Ht10 Wh90p CrBdGy BrRs10"></div>
    </div>

</div>
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...