N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
数据展示 / 05

进度条 · 仪表盘

把所有「完成度」类数据可视化:线性进度条的五种粗细与配色、进场动画、环形进度、半圆仪表盘、圆环图、热力图与不定量加载条。

进度条五种

.bar / .thin / .thick
粗细与配色
默认 6px64%
细条 thin 4px42%
粗条 thick 10px88%
分色 · 正常 / 成功 / 告警三色
进场动画(滚动到可视区自动填充)
方案设计72%
前端实现46%
接口联调94%
灰度发布18%

容器加 data-bar="72",内层 <i style="width:0"> 进入视口后自动过渡到目标宽度。

环形进度

.ring
24%
已使用配额
58%
构建通过率
76%
季度目标
92%
设备在线率
存储空间
24%
构建通过率
58%
季度目标
76%
设备在线率
92%

仪表盘 · 圆环图

.gauge / .donut
半圆仪表盘
19CPU 使用率
70综合评分

用 --g 控制扇形角度(180° = 满值),内圈遮罩由 .g-mask 生成。

圆环图
68%
订单转化
35%
复购率

单值圆环用 --v;多段分布见下方多色环。

多段分布环
42%直接访问
直接访问42%
搜索引擎26%
社交媒体18%
其他渠道14%

热力图

.hotmap / .hm-cell
近 7 周代码提交热力
单位:次 / 天 · 共 49 天
少 多
一二三四五六日

加载条 · 不定量进度

.loadbar
顶部加载条
正在拉取 2026 年 10 月订单数据…
独立使用
上传队列(定量 + 不定量混用)
2026Q3-经营分析.pdf 上传中…
商品主图-01.jpg · 2.4 MB 100%
商品主图-02.jpg · 3.1 MB 64%
详情长图.png · 8.6 MB 上传失败