Fooyya'iinsa

Galmee fi fakkeenyota barruulee adeemsa amala Bootstrap fayyadamuuf deeggarsa barruulee tuulamanii, duubbee socho'aa, fi asxaalee barruu agarsiisan.

Fuula kana irratti

Akkaataa itti hojjetu

Qaamonni adeemsaa qaamolee HTML lama, bal'ina saaguuf CSS tokko tokko, fi amaloota muraasaan ijaaramu. Nuti elementii HTML5<progress> hin fayyadamnu , barruulee adeemsaa tuuluu, isaan sochoosuu, fi asxaalee barruu isaan irra kaa'uu akka dandeessu mirkaneessina.

.progressGatii ol'aanaa barruu adeemsaa agarsiisuuf akka marfataatti fayyadamna .
.progress-barAdeemsa hanga ammaatti jiru agarsiisuuf keessaa fayyadamna .
The .progress-barbal'ina isaanii saaguuf akkaataa sarara keessaa, gita faayidaa, ykn CSS amala barbaada.
The .progress-barakkasumas dhaqqabamaa akka ta'uuf tokko tokkoo rolefi amaloota barbaada.aria

Sana hunda walitti qabdee, fakkeenyota armaan gadii qabda.

<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 bal'ina saaguuf faayidaa muraasa kenna . Fedhii kee irratti hundaa’uun, kunniin adeemsa saffisaan qindeessuuf gargaaruu danda’u.

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

Asxaalee

Barruu keessa kaa'uudhaan asxaalee barruulee adeemsa kee irratti dabali .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>

Hojjaa

heightGatii qofa irratti saagna .progress, kanaafuu yoo gatii sana jijjiirte keessaan .progress-barofumaan akkaataa kanaan guddina ni jijjiira.

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

Duubbee

Bifa barruulee adeemsa dhuunfaa jijjiiruuf gitaalee faayidaa duubbee fayyadami.

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

Barruulee dachaa

Yoo barbaadde qaama adeemsaa keessatti barruulee adeemsaa hedduu hammachiisi.

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

Sarara kan qabu

Sarara karaa CSS gradient halluu duubbee barruu adeemsaa irratti hojii irra oolchuuf .progress-bar-stripedkamiyyuutti dabali ..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>

Sarara sochii qabu

Giraadiyaantiin sarara qabus socho'uu danda'a. Sararoota mirgaa gara bitaatti karaa sochiiwwan CSS3 sochoosuuf garatti .progress-bar-animateddabali ..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>

Sass jedhama

Jijjiiramoota

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

Furtuuwwan furtuuwwan

Sochiiwwan CSS tiif uumuuf fayyadama .progress-bar-animated. keessatti hammatame scss/_progress-bar.scss.

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