1. 首页
  2. 卡片 Card
  3. card-progress 进度条

卡片 · card-progress 进度条

卡片家族 索引 base cpanel crumb full page border radius api artic namecode imgs tips total default box checkbox form form-item form-inpselect table pager multipled menubar mode menus tabmenu code json template tab slide paginate tree toggle marquee timeaxis waterfall popup nav chatbox drag choose progress roll
进度条卡 card-progress：1em 高药丸子壳（#efefef + 1em 圆角 + 溢出隐藏），内嵌 .progress-bar 主色填充；.progress-desc 描述行；progress-point 多段节点模式（节点圆点 + 连接线，active 转主色）。
本页内容 条形进度 节点进度

条形进度

<div class="card card-progress" data-progress="64" data-format="percent"> <div class="progress-desc"></div> </div>

节点进度

下单
支付
发货
签收
<div class="card card-progress-point" data-progress="2"> <div class="progress-item">下单</div> <div class="progress-item">支付</div> <div class="progress-item">发货</div> <div class="progress-item">签收</div> </div>
提示： 首尾节点的连接线只画半段（first 左 50% / last 右 50%）；节点 active 前与线的填充统一取 --color-index。
上一张（循环） card-choose 单选
下一张 card-roll 抽奖 & 3D
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页