# ui.skeleton | NiceGUI

[Button: icon:menu]

[](/)

[Installation](/#installation)

[Features](/#features)

[Demos](/#demos)

[Documentation](/documentation)

[Examples](/examples)

[Why?](/#why)

[Button]

[Button]

[](https://github.com/zauberzeug/nicegui/)

[Button: icon:more_vert]

# ui.*skeleton*

## Skeleton

This element is based on Quasar's `QSkeleton <https://quasar.dev/vue-components/skeleton>`_ component.
It serves as a placeholder for loading content in cards, menus and other component containers.
See the `Quasar documentation <https://quasar.dev/vue-components/skeleton/#predefined-types>`_ for a list of available types.

:type: type of skeleton to display (default: "rect")
:tag: HTML tag to use for this element (default: "div")
:animation: animation effect of the skeleton placeholder (default: "wave")
:animation_speed: animation speed in seconds (default: 1.5)
:square: whether to remover border-radius so borders are squared (default: ``False``)
:bordered: whether to apply a default border to the component (default: ``False``)
:size: size in CSS units (overrides ``width`` and ``height``)
:width: width in CSS units (overridden by ``size`` if set)
:height: height in CSS units (overridden by ``size`` if set)

main.py

[Button]

````python
from nicegui import ui

ui.skeleton().classes('w-full')

ui.run()
````

## Styling and animation

The `square` and `bordered` parameters can be set to `True` to remove the border-radius and add a border to the skeleton.

The `animation` parameter can be set to "pulse", "wave", "pulse-x", "pulse-y", "fade", "blink", or "none"
to change the animation effect.
The default value is "wave".

main.py

[Button]

````python
from nicegui import ui

ui.skeleton('QToolbar', square=True, bordered=True, animation='pulse-y') \
    .classes('w-full')

ui.run()
````

## YouTube Skeleton

Here is an example skeleton for a YouTube video.

main.py

[Button]

````python
from nicegui import ui

with ui.card().tight().classes('w-full'):
    ui.skeleton(square=True, animation='fade', height='150px', width='100%')
    with ui.card_section().classes('w-full'):
        ui.skeleton('text').classes('text-subtitle1')
        ui.skeleton('text').classes('text-subtitle1 w-1/2')
        ui.skeleton('text').classes('text-caption')

ui.run()
````

**Nice**GUI

The Python UI framework that shows up in your browser.

[](https://github.com/zauberzeug/nicegui/)

[](https://discord.gg/TEpFeAaF4f)

[](https://www.reddit.com/r/nicegui/)

Resources

[Documentation](/documentation)

[Examples](/examples)

[LLM reference](/llms.txt)

[GitHub](https://github.com/zauberzeug/nicegui/)

[PyPI](https://pypi.org/project/nicegui/)

Community

[Discussions](https://github.com/zauberzeug/nicegui/discussions)

[Discord](https://discord.gg/TEpFeAaF4f)

[Reddit](https://www.reddit.com/r/nicegui/)

[Contributing](https://github.com/zauberzeug/nicegui/blob/main/CONTRIBUTING.md)

[Sponsors](https://github.com/sponsors/zauberzeug)

Legal

[Imprint](/imprint_privacy#imprint)

[Privacy](/imprint_privacy#privacy)

Made with NiceGUI by [Zauberzeug](https://zauberzeug.com)

© 2026 [Zauberzeug GmbH](https://zauberzeug.com)