Foundation 进度条 - 学习 Foundation 5 - 简单教程，简单编程

进度条可以作为程序处理的程度来显示

Foundation 使用 <div class="progress"> 类来创建进度条，包裹 <span class="meter"> 元素设置进度百分比

<div class="progress">
    <span class="meter" style="width:70%"></span>
</div>

运行范例 »

进度条颜色

默认情况下，进度条颜色为蓝色

可以在 <span> 上添加不同颜色的类：.secondary,.success, .alert

<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>

运行范例 »

圆角进度条

.radius CSS 类用于为进度条添加圆角效果

<div class="progress">
    <span class="meter" style="width:50%"></span>
</div>
<div class="progress radius">
    <span class="meter" style="width:50%"></span>
</div>

运行范例 »

圆形进度条

.round CSS 类用于为进度条添加圆形效果

<div class="progress">
    <span class="meter" style="width:50%"></span>
</div>
<div class="progress round">
    <span class="meter" style="width:50%"></span>
</div>

运行范例 »

进度条尺寸

可以使用 .small-num 或.large-num来修改进度条的宽度， num 是一个数字，介于 1(8.33%) 和 12(default (100%)) 之间

<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>

<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>

运行范例 »