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 waliin ijaaramu, bal'ina saaguuf CSS tokko tokko, fi amaloota muraasa. Nuti elementii HTML5<progress> hin fayyadamnu , barruulee adeemsaa tuuluu, isaan sochoosuu, fi asxaalee barruu isaan irra kaa'uu akka dandeessu mirkaneessa.

.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 maqaa dhaqqabamaa dabalatee ( , , ykn kan kana fakkaatu fayyadamuun) dhaqqabamaa taasisuuf tokko tokkoo rolefi amaloota barbaada.ariaaria-labelaria-labelledby

Sana hunda walitti qabdee, fakkeenyota armaan gadii qabda.

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

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>

Asxaalee

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

Hojjaa

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

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>

Duubbee

Bifa barruulee adeemsa dhuunfaa jijjiiruuf gitaalee faayidaa duubbee fayyadami.

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>

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.

Barruulee dachaa

Yoo barbaadde qaama adeemsaa keessatti barruulee adeemsaa hedduu hammachiisi.

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>

Sarara kan qabu

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

Sarara sochii qabu

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

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama itti dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, barruulee adeemsaa amma jijjiiramoota CSS naannoo irratti fayyadamu .progressdhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

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

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

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