Skip to content

Commit

Permalink
5222 added bootstrap 5.3 progress component (#5288)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OleksandrTochonyi
OleksandrTochonyi authored Jan 2, 2024
1 parent dcc7bc7 commit d30f655
Showing 1 changed file with 202 additions and 0 deletions.
202 changes: 202 additions & 0 deletions bootstrap-5-3-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6011,6 +6011,208 @@ <h4>Alignment</h4>
</div>

</div>
<div class="doc-space line">
<h2 class="block-title">Progress</h2>
<div class="html-center">
<h4>Ordinary Progress</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#how-it-works"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#how-it-works</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress mb-3" id="progress-ordinary-0" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress mb-3" id="progress-ordinary-25" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress mb-3" id="progress-ordinary-50" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress mb-3" id="progress-ordinary-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" id="progress-ordinary-100" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%"></div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Width</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#width"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#width</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress" id="progress-width" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar w-75"></div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Height</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#height"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#height</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress mb-3" id="progress-height-1px" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" id="progress-height-20px" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
<div class="progress-bar" style="width: 25%"></div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Labels</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#labels"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#labels</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress mb-3" id="progress-labels-value" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress" id="progress-labels-text" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Backgrounds</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#backgrounds"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#backgrounds</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress mb-3" id="progress-background-success" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress mb-3" id="progress-background-info" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress mb-3" id="progress-background-warning" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress mb-3" id="progress-background-danger" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>
<p class="mb-3">If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate text color, so the labels remain readable and have sufficient contrast.</p>
<div class="progress mb-3" id="progress-background-success-value" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress mb-3" id="progress-background-info-value" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress mb-3" id="progress-background-warning-value" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" id="progress-background-danger-value" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Multiple bars</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#multiple-bars"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#multiple-bars</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress-stacked" id="progress-multiple-bars">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
<div class="progress-bar"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
<div class="progress-bar bg-success"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar bg-info"></div>
</div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Striped</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#striped"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#striped</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress mb-3" id="progress-striped-default" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress mb-3" id="progress-striped-success" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress mb-3" id="progress-striped-info" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress mb-3" id="progress-striped-warning" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress mb-3" id="progress-striped-danger" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Animated stripes</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/progress/#animated-stripes"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/progress/#animated-stripes</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="progress" id="progress-animated-stripes" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
</div>



</div>



</div>
Expand Down

0 comments on commit d30f655

Please sign in to comment.