Ci gaba

Takaddun bayanai da misalai don amfani da sandunan ci gaba na al'ada na Bootstrap waɗanda ke nuna goyan baya ga sandunan da aka tattara, abubuwan rayayye, da alamun rubutu.

A wannan shafi

Yadda yake aiki

An gina abubuwan ci gaba tare da abubuwan HTML guda biyu, wasu CSS don saita faɗin, da ƴan sifofi. Ba ma amfani da kashi na HTML5<progress> , yana tabbatar da cewa zaku iya tara sandunan ci gaba, raya su, da sanya alamun rubutu akan su.

Muna amfani da .progressa matsayin abin rufewa don nuna max darajar mashigin ci gaba.
Muna amfani da ciki .progress-bardon nuna ci gaban ya zuwa yanzu.
Wannan .progress-baryana buƙatar salon layi, aji mai amfani, ko CSS na al'ada don saita faɗin su.
Hakanan .progress-baryana buƙatar wasu roleda ariasifofi don sanya shi isa.

Haɗa wannan duka, kuma kuna da misalai masu zuwa.

<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 yana ba da ɗimbin kayan aiki don saita faɗin . Dangane da bukatun ku, waɗannan na iya taimakawa tare da daidaita ci gaba cikin sauri.

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

Lakabi

Ƙara lakabi zuwa sandunan ci gaba ta hanyar sanya rubutu a cikin .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>

Tsayi

Mu kawai muna saita heightƙima akan .progress, don haka idan kun canza wannan ƙimar abin ciki .progress-barzai sake girma ta atomatik daidai.

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

Bayanan baya

Yi amfani da azuzuwan mai amfani na baya don canza kamannin sandunan ci gaba ɗaya ɗaya.

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

Sanduna da yawa

Haɗa sandunan ci gaba da yawa a cikin ɓangaren ci gaba idan kuna buƙata.

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

Tatsi

Ƙara .progress-bar-stripedzuwa kowane .progress-bardon amfani da tsiri ta hanyar CSS gradient akan launi na bangon ci gaba.

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

Rage ratsi

Hakanan za'a iya raye-rayen raye-rayen raye-raye. Ƙara .progress-bar-animatedzuwa .progress-barrayayye ratsi dama zuwa hagu ta hanyar rayarwa ta CSS3.

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

Sass

Masu canji

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

Firam ɗin maɓalli

An yi amfani da shi don ƙirƙirar raye-rayen CSS don .progress-bar-animated. Kunshe a cikin scss/_progress-bar.scss.

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