Fooyya'iinsa
Galmee fi fakkeenyota barruulee adeemsa amala Bootstrap fayyadamuuf deeggarsa barruulee tuulamanii, duubbee socho'aa, fi asxaalee barruu agarsiisan.
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.
.progress
Gatii ol'aanaa barruu adeemsaa agarsiisuuf akka marfataatti fayyadamna ..progress-bar
Adeemsa hanga ammaatti jiru agarsiisuuf keessaa fayyadamna .- The
.progress-bar
bal'ina isaanii saaguuf akkaataa sarara keessaa, gita faayidaa, ykn CSS amala barbaada. - The
.progress-bar
akkasumas dhaqqabamaa akka ta'uuf tokko tokkoorole
fi 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
.
<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
height
Gatii qofa irratti saagna .progress
, kanaafuu yoo gatii sana jijjiirte keessaan .progress-bar
ofumaan 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-striped
kamiyyuutti 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-animated
dabali ..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; }
}
}