Индикатор выполнения Foundation
Индикатор выполнения Foundation может отображаться как степень обработки программы:
Мы можем<div>используйте в элементе.progressКласс для создания индикатора выполнения,.meterКласс используется для дочерних элементов (<span>). Мы можем задать процент выполнения в элементе <span>, как показано ниже:
цвет индикатора выполнения
По умолчанию цвет индикатора выполнения синий. Классы для разных цветов:.secondary, .success, или
.alert:
Пример
<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и.roundКласс, используемый для добавления закругленных углов к прогресс-бару:
Пример
<span class="meter" style="width:50%"></span>
</div>
<div class="progress radius">
<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 (по умолчанию (100%)):
Пример
<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> для отображения процентного значения:
Пример
.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>
Попробуйте сами »