# ui.skeleton | NiceGUI

[Button: icon:menu]

[](/zh)

[安装](/zh#installation)

[特性](/zh#features)

[演示](/zh#demos)

[文档](/zh/documentation)

[示例](/zh/examples)

[为什么？](/zh#why)

[Button]

[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

在浏览器中呈现的 Python UI 框架。

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

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

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

资源

[文档](/zh/documentation)

[示例](/zh/examples)

[LLM 参考](/llms.txt)

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

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

社区

[讨论区](https://github.com/zauberzeug/nicegui/discussions)

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

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

[参与贡献](https://github.com/zauberzeug/nicegui/blob/main/CONTRIBUTING.md)

[赞助者](https://github.com/sponsors/zauberzeug)

法律

[法律声明](/zh/imprint_privacy#imprint)

[隐私](/zh/imprint_privacy#privacy)

由 [Zauberzeug](https://zauberzeug.com) 用 NiceGUI 打造

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