進度條 · WINUI開發文檔

#### 默認進度條 ![](https://box.kancloud.cn/fca75b0c394a954e3542e7971f7879aa_892x122.png) 代碼示例： ``` <div class="win-progress win-progress-sm"> <div class="win-progress-bar win-bg-purple" data-percent="22%"></div> <span class="win-progress-text win-text-purple"></span> </div> <div class="win-progress"> <div class="win-progress-bar" data-percent="75%"></div> <span class="win-progress-text"></span> </div> <div class="win-progress win-progress-lg"> <div class="win-progress-bar win-bg-warm win-progress-round" data-percent="48%"></div> <span class="win-progress-text win-text-warm"></span> </div> ``` ***** #### 懸浮數值進度條 ![](https://box.kancloud.cn/5d20e0832d5c493da4480b890e273858_882x88.png) 代碼示例： ``` <div class="win-progress win-progress-suspen"> <div class="win-progress-bar" data-percent="75%"></div> <span class="win-progress-text"></span> </div> ``` ***** #### 可拖動進度條 ![](https://box.kancloud.cn/5736d24d09875de0e4859773a783f2af_889x47.png) 代碼示例： ``` <div class="win-progress win-progress-drag"> <div class="win-progress-bar" data-percent="75%"></div> <span class="win-progress-circle-btn"></span> </div> ``` ***** #### 分步驟進度條 ![](https://box.kancloud.cn/298a64b9fdc9a8a09b28f5e7491c6bf3_851x53.png) 代碼示例： ``` <div class="win-progress win-progress-steps win-bg-gray"> <div class="win-progress-bar" data-percent="50%"></div> <span class="win-progress-step"></span> <span class="win-progress-step1"></span> <span class="win-progress-step1"></span> <span class="win-progress-step1"></span> <span class="win-progress-step1"></span> <span class="win-progress-step"></span> </div> ``` ***** #### 圓形進度條 ![](https://box.kancloud.cn/82a77614b124e097bee019fc61726960_856x172.png) 代碼示例： ``` <div class="win-progress win-progress-circle win-progress-circle-sm win-inline"> <div class="win-pie-left"> <div class="win-pie-circle-left"></div> </div> <div class="win-pie-right"> <div class="win-pie-circle-right"></div> </div> <div class="win-pie-mask"><span>13</span>%</div> </div> <div class="win-progress win-progress-circle win-inline"> <div class="win-pie-left"> <div class="win-pie-circle-left"></div> </div> <div class="win-pie-right"> <div class="win-pie-circle-right"></div> </div> <div class="win-pie-mask"><span>85</span>%</div> </div> <div class="win-progress win-progress-circle win-progress-circle-lg win-inline"> <div class="win-pie-left"> <div class="win-pie-circle-left"></div> </div> <div class="win-pie-right"> <div class="win-pie-circle-right"></div> </div> <div class="win-pie-mask"><span>42</span>%</div> </div> ```