在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
Foundation 进度条Foundation 进度条可以作为程序处理的程度来显示: 我们可以在 进度条颜色默认情况下,进度条颜色为蓝色。不同颜色的类为: 实例<div class="progress"> <span class="meter" style="width:50%"></span> </div> <div class="progress secondary"> <span class="meter" style="width:50%"></span> </div> <div class="progress success"> <span class="meter" style="width:50%"></span> </div> <div class="progress alert"> <span class="meter" style="width:50%"></span> </div> 尝试一下 » 圆角进度条 实例<div class="progress"> <span class="meter" style="width:50%"></span> </div> <div class="progress radius"> <span class="meter" style="width:50%"></span> </div> <div class="progress rounded"> <span class="meter" style="width:50%"></span> </div> 尝试一下 » 进度条尺寸可以使用 实例<div class="progress large-1"> <span class="meter" style="width:50%"></span> </div> <div class="progress large-6"> <span class="meter" style="width:50%"></span> </div> <div class="progress large-9"> <span class="meter" style="width:50%"></span> </div> <div class="progress large-11"> <span class="meter" style="width:50%"></span> </div> <!-- Default width --> <div class="progress large-12"> <span class="meter" style="width:50%"></span> </div> 尝试一下 » 进度条标签可以使用 CSS 为进度条添加标签。以下实例中我们添加了<span> 元素来显示百分比: 实例 <style> .percentage { position: absolute; top: 50%; left: 50%; color: white; transform: translate(-50%, -50%); font-size: 12px; } </style> <div class="progress"> <span class="meter" style="position:relative;width:75%"> <span class="percentage">75%</span> </span> </div> <div class="progress success"> <span class="meter" style="position:relative;width:50%"> <span class="percentage">50%</span> </span> </div> <div class="progress alert"> <span class="meter" style="position:relative;width:25%"> <span class="percentage">25%</span> </span> </div> 尝试一下 » |
请发表评论