របារវឌ្ឍនភាព
ផ្ដល់ដំណឹងពីបច្ចុប្បន្នភាពរបស់ដំណើរការឬសកម្មភាពណាមួយរបស់អ្នកប្រើប្រាស់ ជាមួយនឹងរបារវឌ្ឍនភាពសាមញ្ញ និងបត់បែនបាន។
មានជាទូទៅ
ឧទាហរណ៍
បុរេជម្រើស
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-secondary"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-dark"
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"
>
50%
</div>
</div>
មានក្រឡា
<div class="progress">
<div
class="progress-bar progress-bar-striped"
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 progress-bar-animated"
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: 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-height: 1rem !default;
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width 0.6s ease !default;