പുരോഗതി

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്‌ടാനുസൃത പുരോഗതി ബാറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും സ്റ്റാക്ക് ചെയ്‌ത ബാറുകൾ, ആനിമേറ്റുചെയ്‌ത പശ്ചാത്തലങ്ങൾ, ടെക്‌സ്‌റ്റ് ലേബലുകൾ എന്നിവയ്‌ക്കുള്ള പിന്തുണ ഫീച്ചർ ചെയ്യുന്നു.

ഈ പേജിൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

രണ്ട് HTML ഘടകങ്ങൾ, വീതി സജ്ജീകരിക്കാൻ ചില CSS, കുറച്ച് ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിച്ചാണ് പ്രോഗ്രസ് ഘടകങ്ങൾ നിർമ്മിച്ചിരിക്കുന്നത്. ഞങ്ങൾ HTML5 <progress>ഘടകം ഉപയോഗിക്കുന്നില്ല , നിങ്ങൾക്ക് പ്രോഗ്രസ് ബാറുകൾ അടുക്കിവെക്കാനും അവയെ ആനിമേറ്റ് ചെയ്യാനും അവയുടെ മുകളിൽ ടെക്സ്റ്റ് ലേബലുകൾ സ്ഥാപിക്കാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു.

.progressപ്രോഗ്രസ് ബാറിന്റെ പരമാവധി മൂല്യം സൂചിപ്പിക്കാൻ ഞങ്ങൾ ഒരു റാപ്പറായി ഉപയോഗിക്കുന്നു .
.progress-barഇതുവരെയുള്ള പുരോഗതി സൂചിപ്പിക്കാൻ ഞങ്ങൾ ആന്തരികം ഉപയോഗിക്കുന്നു .
.progress-barഅവയുടെ വീതി സജ്ജീകരിക്കുന്നതിന് ഒരു ഇൻലൈൻ ശൈലി, യൂട്ടിലിറ്റി ക്ലാസ് അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത CSS എന്നിവ ആവശ്യമാണ് .
ഇത് ആക്‌സസ് ചെയ്യാൻ ചിലതും .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>

വരയുള്ള

പ്രോഗ്രസ് ബാറിന്റെ പശ്ചാത്തല വർണ്ണത്തിന് മുകളിൽ CSS ഗ്രേഡിയന്റ് വഴി ഒരു സ്ട്രൈപ്പ് പ്രയോഗിക്കാൻ ഏതിലേയ്‌ക്കും .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>

ആനിമേറ്റഡ് സ്ട്രൈപ്പുകൾ

വരയുള്ള ഗ്രേഡിയന്റ് ആനിമേറ്റ് ചെയ്യാനും കഴിയും. CSS3 ആനിമേഷനുകൾ വഴി വലത്ത് നിന്ന് ഇടത്തേക്ക് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യാൻ to .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>

സാസ്

വേരിയബിളുകൾ

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