logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Complex combination
Active Animation
Button/Avatar/Input/Image/Node
Contains sub component
List
API
Skeleton
SkeletonAvatarProps
SkeletonTitleProps
SkeletonParagraphProps
SkeletonButtonProps
SkeletonInputProps
Design Token

Skeleton

    • ResultSpin

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.

    When To Use

    • When a resource needs long time to load.
    • When the component contains lots of information, such as List or Card.
    • Only works when loading data for the first time.
    • Could be replaced by Spin in any situation, but can provide a better user experience.

    Examples

    Basic

    Simplest Skeleton usage.

    expand codeexpand code
    Complex combination

    Complex combination with avatar and multiple paragraphs.

    expand codeexpand code
    Active Animation

    Display active animation.

    expand codeexpand code
    Button/Avatar/Input/Image/Node

    Skeleton Button, Avatar, Input, Image and Node.

    expand codeexpand code
    Contains sub component

    Skeleton contains sub component.

    expand codeexpand code
    List

    Use skeleton in list component.

    expand codeexpand code

    API

    Common props ref：Common props

    Skeleton

    PropertyDescriptionTypeDefault
    activeShow animation effectbooleanfalse
    avatarShow avatar placeholderboolean | SkeletonAvatarPropsfalse
    loadingDisplay the skeleton when trueboolean-
    paragraphShow paragraph placeholderboolean | SkeletonParagraphPropstrue
    roundShow paragraph and title radius when truebooleanfalse
    titleShow title placeholderboolean | SkeletonTitlePropstrue

    SkeletonAvatarProps

    PropertyDescriptionTypeDefault
    activeShow animation effect, only valid when used avatar independentlybooleanfalse
    shapeSet the shape of avatarcircle | square-
    sizeSet the size of avatarnumber | large | small | default-

    SkeletonTitleProps

    PropertyDescriptionTypeDefault
    widthSet the width of titlenumber | string-

    SkeletonParagraphProps

    PropertyDescriptionTypeDefault
    rowsSet the row count of paragraphnumber-
    widthSet the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row widthnumber | string | Array<number | string>-

    SkeletonButtonProps

    PropertyDescriptionTypeDefaultVersion
    activeShow animation effectbooleanfalse
    blockOption to fit button width to its parent widthbooleanfalse4.17.0
    shapeSet the shape of buttoncircle | round | square | default-
    sizeSet the size of buttonlarge | small | default-

    SkeletonInputProps

    PropertyDescriptionTypeDefault
    activeShow animation effectbooleanfalse
    sizeSet the size of inputlarge | small | default-

    Design Token

    Global Token







    Namu Design, a design language

    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.