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