Skeleton 骨架屏

Skeleton 用于展示加载状态，并预览组件的预期形状。

用法

1import { Skeleton } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  panel: {7    width: 250,8    display: "flex",9    flexDirection: "column",10    gap: 20,11    borderRadius: "var(--radius-lg)",12    backgroundColor: "transparent",13    padding: 16,14    boxShadow: "var(--shadow-panel)",15  },16  text: { display: "flex", flexDirection: "column", gap: 12 },17  picture: { height: 128, borderRadius: "var(--radius-lg)" },18  short: { height: 12, width: "60%", borderRadius: "var(--radius-lg)" },19  long: { height: 12, width: "80%", borderRadius: "var(--radius-lg)" },20  shortest: { height: 12, width: "40%", borderRadius: "var(--radius-lg)" },21});22export function Basic() {23  return (24    <div {...stylex.props(styles.panel)}>25      <Skeleton xstyle={styles.picture} />26      <div {...stylex.props(styles.text)}>27        <Skeleton xstyle={styles.short} />28        <Skeleton xstyle={styles.long} />29        <Skeleton xstyle={styles.shortest} />30      </div>31    </div>32  );33}34export default Basic;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

示例

文本内容

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  text: { width: "100%", maxWidth: 448, display: "flex", flexDirection: "column", gap: 12 },7  line: { height: 16, borderRadius: "var(--radius)" },8  full: { width: "100%" },9  five: { width: "83.333333%" },10  four: { width: "66.666667%" },11  half: { width: "50%" },12});13export function TextContent() {14  return (15    <div {...stylex.props(styles.text)}>16      <Skeleton xstyle={[styles.line, styles.full]} />17      <Skeleton xstyle={[styles.line, styles.five]} />18      <Skeleton xstyle={[styles.line, styles.four]} />19      <Skeleton xstyle={[styles.line, styles.full]} />20      <Skeleton xstyle={[styles.line, styles.half]} />21    </div>22  );23}24export default TextContent;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

用户资料

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  row: { display: "flex", alignItems: "center", gap: 12 },7  avatar: { height: 40, width: 40, flexShrink: 0, borderRadius: "50%" },8  text: { flex: 1, display: "flex", flexDirection: "column", gap: 8 },9  name: { height: 12, width: 144, borderRadius: "var(--radius-lg)" },10  detail: { height: 12, width: 96, borderRadius: "var(--radius-lg)" },11});12export function UserProfile() {13  return (14    <div {...stylex.props(styles.row)}>15      <Skeleton xstyle={styles.avatar} />16      <div {...stylex.props(styles.text)}>17        <Skeleton xstyle={styles.name} />18        <Skeleton xstyle={styles.detail} />19      </div>20    </div>21  );22}23export default UserProfile;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

列表项

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  list: { width: "100%", maxWidth: 384, display: "flex", flexDirection: "column", gap: 16 },7  row: { display: "flex", alignItems: "center", gap: 12 },8  avatar: { height: 40, width: 40, flexShrink: 0, borderRadius: "var(--radius-lg)" },9  text: { flex: 1, display: "flex", flexDirection: "column", gap: 8 },10  full: { height: 12, width: "100%", borderRadius: "var(--radius)" },11  short: { height: 12, width: "80%", borderRadius: "var(--radius)" },12});13export function List() {14  return (15    <div {...stylex.props(styles.list)}>16      {Array.from({ length: 3 }, (_, index) => (17        <div key={index} {...stylex.props(styles.row)}>18          <Skeleton xstyle={styles.avatar} />19          <div {...stylex.props(styles.text)}>20            <Skeleton xstyle={styles.full} />21            <Skeleton xstyle={styles.short} />22          </div>23        </div>24      ))}25    </div>26  );27}28export default List;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

网格

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",11    gap: 16,12  },13  bone: { height: 96, borderRadius: "var(--radius-xl)" },14});15export function Grid() {16  return (17    <div {...stylex.props(styles.grid)}>18      <Skeleton xstyle={styles.bone} />19      <Skeleton xstyle={styles.bone} />20      <Skeleton xstyle={styles.bone} />21    </div>22  );23}24export default Grid;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

单次闪烁

同步的 shimmer 效果会一次性扫过所有骨架元素。在父容器上应用 skeleton--shimmer 类，并将子骨架的 animationType 设为 "none"。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",11    gap: 16,12    borderRadius: "var(--radius-xl)",13    backgroundColor: "transparent",14  },15  bone: { height: 96, borderRadius: "var(--radius-xl)" },16});17export function SingleShimmer() {18  return (19    <Skeleton xstyle={styles.grid}>20      <Skeleton animationType="none" xstyle={styles.bone} />21      <Skeleton animationType="none" xstyle={styles.bone} />22      <Skeleton animationType="none" xstyle={styles.bone} />23    </Skeleton>24  );25}26export default SingleShimmer;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

动画类型

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: {11      default: "1fr",12      "@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",13      "@media (min-width: 1024px)": "repeat(3, minmax(0, 1fr))",14    },15    gap: 24,16  },17  column: { display: "flex", flexDirection: "column", gap: 8 },18  label: {19    fontSize: 12,20    lineHeight: "16px",21    color: "var(--muted)",22    overflow: "hidden",23    textOverflow: "ellipsis",24    whiteSpace: "nowrap",25  },26  panel: {27    display: "flex",28    flexDirection: "column",29    gap: 12,30    borderRadius: "var(--radius-lg)",31    backgroundColor: "transparent",32    padding: 16,33    boxShadow: "var(--shadow-panel)",34  },35  picture: { height: 80, borderRadius: "var(--radius-lg)" },36  short: { height: 12, width: "60%", borderRadius: "var(--radius-lg)" },37  long: { height: 12, width: "80%", borderRadius: "var(--radius-lg)" },38});39export function AnimationTypes() {40  return (41    <div {...stylex.props(styles.grid)}>42      {(["shimmer", "pulse", "none"] as const).map((animationType) => (43        <div key={animationType} {...stylex.props(styles.column)}>44          <p {...stylex.props(styles.label)}>45            {animationType === "shimmer" ? "Shimmer" : animationType === "pulse" ? "Pulse" : "None"}46          </p>47          <div {...stylex.props(styles.panel)}>48            <Skeleton animationType={animationType} xstyle={styles.picture} />49            <Skeleton animationType={animationType} xstyle={styles.short} />50            <Skeleton animationType={animationType} xstyle={styles.long} />51          </div>52        </div>53      ))}54    </div>55  );56}57export default AnimationTypes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const shine = stylex.keyframes({6  from: { translate: "-100% 0" },7  to: { translate: "100% 0" },8});9const styles = stylex.create({10  panel: {11    width: 250,12    display: "flex",13    flexDirection: "column",14    gap: 20,15    borderRadius: "var(--radius-xl)",16    border: "1px solid color-mix(in oklab, var(--border) 80%, transparent)",17    backgroundColor: "var(--surface)",18    padding: 16,19    boxShadow:20      "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .1))",21  },22  text: { display: "flex", flexDirection: "column", gap: 12 },23  bone: {24    borderRadius: "var(--radius-lg)",25    backgroundColor: "light-dark(oklch(92.2% 0 0 / .9), oklch(26.9% 0 0 / .9))",26    "::after": {27      position: "absolute",28      inset: 0,29      width: "100%",30      height: "100%",31      content: '""',32      translate: "-100% 0",33      backgroundImage:34        "linear-gradient(120deg, transparent 10%, light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .1)) 45%, light-dark(rgb(255 255 255 / .1), rgb(255 255 255 / .04)) 55%, transparent 90%)",35      animationName: { default: shine, "@media (prefers-reduced-motion: reduce)": "none" },36      animationDuration: "3s",37      animationTimingFunction: "ease-in-out",38      animationIterationCount: "infinite",39      pointerEvents: "none",40    },41  },42  picture: { height: 128 },43  short: { height: 12, width: "60%" },44  long: { height: 12, width: "80%" },45  shortest: { height: 12, width: "40%" },46});47export function CustomStyles() {48  return (49    <div {...stylex.props(styles.panel)}>50      <Skeleton xstyle={[styles.bone, styles.picture]} />51      <div {...stylex.props(styles.text)}>52        <Skeleton xstyle={[styles.bone, styles.short]} />53        <Skeleton xstyle={[styles.bone, styles.long]} />54        <Skeleton xstyle={[styles.bone, styles.shortest]} />55      </div>56    </div>57  );58}59export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

1@layer components {2  /* Base skeleton styles */3  .skeleton {4    @apply bg-surface-secondary/50; /* Change base background */5  }6
7  /* Shimmer animation gradient */8  .skeleton--shimmer:before {9    @apply viasurface; /* Change shimmer gradient color */10  }11
12  /* Pulse animation */13  .skeleton--pulse {14    @apply animate-pulse opacity-75; /* Customize pulse animation */15  }16
17  /* No animation variant */18  .skeleton--none {19    @apply opacity-50; /* Style for static skeleton */20  }21}

全局动画配置

可在全局 CSS 中通过 --skeleton-animation 变量为所有 Skeleton 组件设置默认动画类型：

1/* 全局 CSS 文件 */2:root {3  /* 可选值：shimmer、pulse、none */4  --skeleton-animation: pulse;5}6
7/* 也可为浅色/深色主题设置不同值 */8.light, [data-theme="light"] {9  --skeleton-animation: shimmer;10}11
12.dark, [data-theme="dark"] {13  --skeleton-animation: pulse;14}

在单个组件上指定 animationType 属性会覆盖此全局设置。

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

全局动画配置

你可以通过在应用中定义 --skeleton-animation CSS 变量，为所有 Skeleton 设置默认动画类型：

1/* In your global CSS file */2:root {3  /* Possible values: shimmer, pulse, none */4  --skeleton-animation: pulse;5}6
7/* You can also set different values for light/dark themes */8.light, [data-theme="light"] {9  --skeleton-animation: shimmer;10}11
12.dark, [data-theme="dark"] {13  --skeleton-animation: pulse;14}

在单个组件上指定 animationType 时，会覆盖上述全局设置。

CSS 类

Skeleton 使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.skeleton - 包含背景与圆角等基础骨架样式

动画变体类 [!toc]

.skeleton--shimmer - 添加带渐变效果的闪烁动画（默认）
.skeleton--pulse - 使用 Tailwind 的 animate-pulse 添加脉冲动画
.skeleton--none - 无动画的静态骨架

动画

Skeleton 支持三种动画类型，视觉效果各不相同：

闪烁动画 [!toc]

闪烁效果会在骨架元素上移动渐变：

1.skeleton--shimmer:before {2  @apply animate-skeleton via-surface-3 absolute inset-0 -translate-x-full3         bg-gradient-to-r from-transparent to-transparent content-[''];4}

闪烁动画在主题中通过以下方式定义：

1@theme inline {2  --animate-skeleton: skeleton 2s linear infinite;3
4  @keyframes skeleton {5    100% {6      transform: translateX(200%);7    }8  }9}

脉冲动画 [!toc]

脉冲动画使用 Tailwind 内置的 animate-pulse 工具类：

1.skeleton--pulse {2  @apply animate-pulse;3}

无动画 [!toc]

用于不需要任何动画的静态骨架：

1.skeleton--none {2  /* No animation styles applied */3}

API 参考

Skeleton

Prop	类型	默认值	描述
`animationType`	`"shimmer" \| "pulse" \| "none"`	`"shimmer"` 或 CSS 变量	Skeleton 的动画类型；也可通过 `--skeleton-animation` CSS 变量进行全局配置
`className`	`string`	-	额外的 CSS 类名

Skeleton 骨架屏

用法

示例

文本内容

用户资料

列表项

网格

单次闪烁

动画类型

自定义样式

Tailwind CSS

全局 CSS

全局动画配置

样式参考

全局动画配置

CSS 类

基础类 [!toc]

动画变体类 [!toc]

动画

闪烁动画 [!toc]

脉冲动画 [!toc]

无动画 [!toc]

API 参考

Skeleton

相关组件