Skeleton#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Skeleton component displays a placeholder preview of your content before the data gets loaded, reducing load-time frustration and improving perceived performance.


Skeleton screens provide an alternative to traditional spinner methods by creating anticipation of what is to come and reducing cognitive load. They are commonly used for:


    

  • Loading states in cards and lists
    • 

  • Content placeholders while data is fetching
    • 

  • Improving perceived performance
    • 

  • Creating better user experience during wait times
    • 





Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • height (int): Height of the skeleton component in pixels. If 0 or not specified, adapts to content
    • 

  • width (int): Width of the skeleton component in pixels. If 0 or not specified, adapts to content
    • 







Display#


    

  • animation (str): Animation variant - options include ‘pulse’ (default), ‘wave’, and None (disabled)
    • 

  • color (str): Background color - supports CSS color values and Material UI palette colors
    • 

  • variant (str): Shape variant - options include ‘text’ (default), ‘circular’, ‘rectangular’, ‘rounded’
    • 







Styling#


    

  • sx (dict): Component level styling API for advanced customization
    • 

  • theme_config (dict): Theming API for consistent design system integration
    • 











Basic Usage#


Create a simple Skeleton by providing a width and height:


skeleton = pmui.Skeleton(width=300, height=24)

skeleton












Animation#


By default the Skeleton will pulse but the animation may also be set to wave or disabled by setting it to None:


pmui.Column(
    pmui.Skeleton(width=300, height=48, animation='pulse'),
    pmui.Skeleton(width=300, height=48, animation='wave'),
    pmui.Skeleton(width=300, height=48, animation=None),
)












Variants#


The Variant component offers different shape variants:


    

  • text: Default style emulating a line of text
    • 

  • circular: Circular shape
    • 

  • rounded: Rounded corners
    • 

  • rectangular: Sharp corners for a more geometric look
    • 



pmui.Column(
    pmui.Skeleton(width=300, height=24, variant='text', margin=(5, 0)),
    pmui.Skeleton(width=48, height=48, variant='circular', margin=(5, 0)),
    pmui.Skeleton(width=300, height=48, variant='rounded', margin=(5, 0)),
    pmui.Skeleton(width=300, height=48, variant='rectangular', margin=(5, 0)),
)












Colors#


Skeleton can be given arbitrary color specification, either based on Mui palettes or valid CSS colors


pmui.Column(
    pmui.Skeleton(width=300, height=24, color='gray.900', margin=(5, 0)),
    pmui.Skeleton(width=300, height=24, color='#639f31', margin=(5, 0)),
    pmui.Skeleton(width=300, height=24, color='red', margin=(5, 0)),
)












Loading#


The Skeleton component can be displayed in a loading state:


pmui.Row(
    pmui.Skeleton(variant="rectangular", width=100, height=60, loading=True),
    pmui.Skeleton(variant="circular", width=50, height=50, loading=True),
)












Api Reference#


pmui.Skeleton(variant="rectangular", width=200, height=40).api(jslink=True)












References#


Panel Documentation:



Material UI Skeleton:





Download this notebook from GitHub (right-click to download).