Прогресс

Жинақталған жолақтарды, анимациялық фондарды және мәтіндік белгілерді қолдауы бар Bootstrap реттелетін орындалу жолақтарын пайдалануға арналған құжаттама және мысалдар.

Бұл бетте

Бұл қалай жұмыс істейді

Прогресс компоненттері екі HTML элементімен, енін орнату үшін кейбір CSS және бірнеше атрибуттармен құрастырылған. Біз HTML5 <progress>элементін пайдаланбаймыз, бұл сізге орындалу жолақтарын жинақтауды, оларды анимациялауды және олардың үстіне мәтін белгілерін қоюды қамтамасыз етеді.

.progressПрогресс жолағының максималды мәнін көрсету үшін орауыш ретінде пайдаланамыз .
.progress-barБіз осы уақытқа дейінгі ілгерілеуді көрсету үшін ішкі мәнді пайдаланамыз .
Олардың .progress-barенін орнату үшін кірістірілген мәнер, қызметтік бағдарлама класы немесе реттелетін CSS қажет.
Сондай -ақ оны қолжетімді ету .progress-barүшін кейбір roleжәне атрибуттар қажет.aria

Осының бәрін біріктіріңіз, сізде келесі мысалдар бар.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap енін орнату үшін бірнеше утилиталарды ұсынады . Сіздің қажеттіліктеріңізге байланысты, олар прогресті жылдам конфигурациялауға көмектесуі мүмкін.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Жапсырмалар

ішінде мәтінді орналастыру арқылы орындалу жолақтарына белгілерді қосыңыз .progress-bar.

25%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Биіктігі

Біз тек heightмәнді орнатамыз .progress, сондықтан бұл мәнді өзгертсеңіз, ішкі .progress-barавтоматты түрде сәйкесінше өлшемін өзгертеді.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фондар

Жеке орындалу жолақтарының көрінісін өзгерту үшін фондық утилита сыныптарын пайдаланыңыз.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Бірнеше жолақтар

Қажет болса, орындалу компонентіне бірнеше орындалу жолақтарын қосыңыз.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Жолақты

Прогресс жолағының өң түсі үстіне CSS градиенті арқылы жолақ қолдану .progress-bar-stripedүшін кез келгенге қосыңыз ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Анимациялық жолақтар

Жолақты градиентті де анимациялауға болады. CSS3 анимациялары арқылы оңнан солға қарай жолақтарды жандандыру үшін .progress-bar-animatedқосу ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Сасс

Айнымалылар

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Негізгі кадрлар

үшін CSS анимацияларын жасау үшін пайдаланылады .progress-bar-animated. кіреді scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}