in English

ކުރިއެރުން

ސްޓޭކްޑް ބާރސް، އެނިމޭޓެޑް ބެކްގްރައުންޑްސް، އަދި ޓެކްސްޓް ލޭބަލްސް އަށް ސަޕޯޓްކުރާ ބޫޓްސްޓްރެޕް ކަސްޓަމް ޕްރޮގްރެސް ބާރސް ބޭނުންކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް.

މި ޞަފްޙާގައެވެ

އެކަން ކުރާ ގޮތް

ޕްރޮގްރެސް ކޮމްޕޮނެންޓްތައް ބިނާކޮށްފައިވަނީ ދެ އެޗްޓީއެމްއެލް އެލިމެންޓާއެކު، ފުޅާމިން ސެޓް ކުރުމަށް ބައެއް ސީއެސްއެސް އާއި މަދު އެޓްރިބިއުޓްތަކަކާއެކުގައެވެ. އަޅުގަނޑުމެން HTML5 <progress>އެލިމެންޓް ބޭނުން ނުކުރަން , ޕްރޮގްރެސް ބާރތައް ސްޓޭކްކޮށް، އެނިމޭޓްކޮށް، އަދި އެތަކެތީގެ މައްޗަށް ޓެކްސްޓް ލޭބަލްތައް ބެހެއްޓޭނެކަން ކަށަވަރުކޮށްދެމެވެ.

އަޅުގަނޑުމެން .progressޕްރޮގްރެސް ބާރގެ މެކްސް ވެލިއު ދައްކާލުމަށްޓަކައި އެސް ރެޕަރ ބޭނުންކުރަމެވެ.
އަޅުގަނޑުމެން އެތެރޭގެ .progress-barގޮތް ބޭނުންކުރަނީ މިހާތަނަށް ލިބިފައިވާ ކުރިއެރުންތައް ދައްކުވައިދިނުމަށެވެ.
.progress-barއެމީހުންގެ ފުޅާމިން ސެޓް ކުރުމަށް އިންލައިން ސްޓައިލް، ޔުޓިލިޓީ ކްލާސް، ނުވަތަ ކަސްޓަމް ސީއެސްއެސް އެއް ބޭނުންވެއެވެ .
ދަ .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>

ބޫޓްސްޓްރެޕް އިން ވިޑްތް ސެޓް ކުރުމަށް އަތްމަތި ދަތި ޔުޓިލިޓީސް އެއް ލިބިގެންދެއެވެ . ތިބާގެ ބޭނުންތަކަށް ބަލާއިރު، މިއީ ކުރިއެރުންތައް އަވަހަށް ކޮންފިގްރޭޓް ކުރުމަށް އެހީތެރިވެދޭނެ ކަންކަމެވެ.

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

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>

އެނިމޭޓެޑް ސްޓްރައިޕްސް އެވެ

އަދި ސްޓްރައިޕްޑް ގްރޭޑިއަންޓް އެނިމޭޓް ކުރެވިދާނެއެވެ. ސީއެސްއެސް3 އެނިމޭޝަންސް މެދުވެރިކޮށް ކަނާތުން ވާތްފަރާތަށް ސްޓްރައިޕްތައް އެނިމޭޓް ކުރުމަށް އެޑް .progress-bar-animatedޓު ..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>

ސީއެސްއެސް އެވެ

ވެރިއޭބަލްސް އެވެ

v5.2.0 ގައި އިތުރުކޮށްފައިވެއެވެ

ބޫޓްސްޓްރެޕްގެ ތަރައްޤީވަމުން އަންނަ ސީއެސްއެސް ވެރިއޭބަލްސް އެޕްރޯޗްގެ ބައެއްގެ ގޮތުގައި، ޕްރޮގްރެސް ބާރތަކުގައި މިހާރު ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްސް އޮން ބޭނުންކޮށްގެން .progressރިއަލް ޓައިމް ކަސްޓަމައިޒޭޝަން އިތުރުކޮށްދެއެވެ. ސީއެސްއެސް ވެރިއޭބަލްތަކަށް ވެލިއުތައް ސެޓް ކުރެވެނީ ސާސް މެދުވެރިކޮށް ކަމުން ސާސް ކަސްޓަމައިޒޭޝަން އަދިވެސް ސަޕޯޓް ކުރެވެއެވެ.

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

ކީފްރޭމްސް އެވެ

އަށް ސީއެސްއެސް އެނިމޭޝަންތައް އުފެއްދުމަށް ބޭނުންކުރެއެވެ .progress-bar-animated. ގައި ހިމެނޭ scss/_progress-bar.scss.

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