بەرەو پێش چوون

بەڵگەنامە و نموونە بۆ بەکارهێنانی هێڵەکانی پێشکەوتنی تایبەتمەند Bootstrap کە پشتگیری لە باری کۆکراوەکان، پاشبنەمای ئەنیمەیشن و ناوی دەقەکانی تێدایە.

لەم پەیجەدا

چۆن کاردەکات

پێکهاتەکانی پێشکەوتن بە دوو توخم HTML دروست دەکرێن، هەندێک CSS بۆ دانانی پانایی، و چەند تایبەتمەندییەک. ئێمە توخمەکەی HTML5<progress> بەکارناهێنین ، دڵنیا دەبینەوە لەوەی کە دەتوانیت پەڕەکانی پێشکەوتن لەسەر یەک کۆبکەیتەوە، ئەنیمەیشنیان بکەیت، و ناوی دەقەکان لەسەریان دابنێیت.

ئێمە .progressوەکو پێچێک بەکاردەهێنین بۆ ئاماژەدان بە بەهای زۆرترین باری پێشکەوتن.
ئێمە ناوەوە بەکاردەهێنین .progress-barبۆ ئاماژەدان بە پێشکەوتنەکان تا ئێستا.
The .progress-barپێویستی بە ستایلێکی ناو هێڵ، پۆلی سوودمەندی، یان CSSی تایبەت هەیە بۆ دانانی پاناییەکەیان.
هەروەها .progress-barپێویستی بە هەندێک roleو ariaتایبەتمەندی هەیە بۆ ئەوەی دەستی پێ بگات، لەوانە ناوێکی دەستڕاگەیشتن (بە بەکارهێنانی aria-label, aria-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>

ڕەنگاوڕەنگ

زیاد بکە .progress-bar-stripedبۆ هەر یەکێک .progress-barبۆ جێبەجێکردنی شریتێک لە ڕێگەی CSS gradient لەسەر ڕەنگی پاشبنەمای باری پێشکەوتن.

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>

هێڵە ئەنیمەیشنەکان

هەروەها دەتوانرێت گرادێنتەکەی ڕەنگاوڕەنگ ئەنیمەیشن بکرێت. زیاد بکە .progress-bar-animatedبۆ .progress-barبۆ ئەنیمەیشنکردنی هێڵەکان لە ڕاستەوە بۆ چەپ لە ڕێگەی ئەنیمەیشنەکانی CSS3.

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 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS پەرەسەندووەکانی Bootstrap، ئێستا پەڕەکانی پێشکەوتن گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن .progressبۆ بەرزکردنەوەی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی 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};

گۆڕاوەکانی ساس

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