Source

ކުރިއެރުން

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

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

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

  • އަޅުގަނޑުމެން .progressޕްރޮގްރެސް ބާރގެ މެކްސް ވެލިއު ދައްކާލުމަށްޓަކައި އެސް ރެޕަރ ބޭނުންކުރަމެވެ.
  • އަޅުގަނޑުމެން އެތެރޭގެ .progress-barގޮތް ބޭނުންކުރަނީ މިހާތަނަށް ލިބިފައިވާ ކުރިއެރުންތައް ދައްކުވައިދިނުމަށެވެ.
  • .progress-barއެމީހުންގެ ފުޅާމިން ސެޓް ކުރުމަށް އިންލައިން ސްޓައިލް، ޔުޓިލިޓީ ކްލާސް، ނުވަތަ ކަސްޓަމް ސީއެސްއެސް އެއް ބޭނުންވެއެވެ .
  • ދަ .progress-barވެސް ބޭނުންވަނީ ބައެއް roleއަދި ariaއެޓްރިބިއުޓްތައް އެކްސެސިބަލް ކުރުމަށްޓަކައެވެ.

އެ ހުރިހާ ކަމެއް އެއްކޮށްލުމުން، ތިބާގެ އަތުގައި ތިރީގައިވާ މިސާލުތައް އެބަހުއްޓެވެ.

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

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

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

ލޭބަލްތައް

ގެ ތެރޭގައި ލިޔުން ބަހައްޓައިގެން ޕްރޮގްރެސް ބާރތަކަށް ލޭބަލްތައް އިތުރުކުރުން .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>

އުސްމިން

އަޅުގަނޑުމެން ހަމައެކަނި heightވެލިއުއެއް ސެޓް ކުރަނީ .progress, އެހެންކަމުން އެ ވެލިއު ބަދަލުކޮށްފިނަމަ އެތެރޭގެ .progress-barސައިޒު އޮޓޮމެޓިކުން އެއަށް ރިއާޔަތްކޮށް ސައިޒް ބަދަލުކުރާނެއެވެ.

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

ބެކްގްރައުންޑްސް

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

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

އެތައް ބާރެކެވެ

ބޭނުންނަމަ ޕްރޮގްރެސް ކޮމްޕޮނެންޓެއްގައި އެތައް ޕްރޮގްރެސް ބާރެއް ހިމަނާށެވެ.

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

ސްޓްރައިޕްޑް އެވެ

ޕްރޮގްރެސް ބާރގެ ބެކްގްރައުންޑް ކުލަގެ މައްޗަށް ސީއެސްއެސް ގްރޭޑިއަންޓް މެދުވެރިކޮށް ސްޓްރައިޕް އެއް .progress-bar-stripedޖައްސަން އެއްވެސް އެއްޗަކަށް އެޑް ކުރާށެވެ ..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>

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

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