Прогресс

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

Бұл бетте

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

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

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

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

html

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

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

html

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

Жапсырмалар

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

25%

html

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

Биіктігі

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

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фондар

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

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Көмекші технологияларға мән беру

Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .visually-hiddenсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

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

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

html

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

Жолақты

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

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

html

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

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

.progressBootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бөлігі ретінде орындалу жолақтары нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалы мәндерін пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass айнымалылары

$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; }
  }
}