Bootstrap 3 Tutorial

Bootstrap 3 Progress Bars

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="73915ea9-6a5b-4f8c-8ed8-4f657f502c7e" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3: Progress Bars</h3>
<p><strong>Progress bars</strong> in Bootstrap 3 are used to indicate the progression of a task, such as file uploads, downloads, or any other process that requires tracking completion. They are visually appealing and can be styled to represent different states of progress.</p>
<hr />
<h3>Basic Usage of Progress Bars</h3>
<p>Bootstrap 3 provides a simple way to create progress bars using the <code>.progress</code> class for the container and <code>.progress-bar</code> for the actual bar. You can customize the progress bar with various contextual classes to indicate different states.</p>
<h4>Example of a Basic Progress Bar</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap 3 Progress Bars Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Progress Bars&lt;/h2&gt;

&lt;h4&gt;Basic Progress Bar&lt;/h4&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
            60%
        &lt;/div&gt;
    &lt;/div&gt;

&lt;h4&gt;Contextual Progress Bars&lt;/h4&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"&gt;
            25%
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"&gt;
            50%
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"&gt;
            75%
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"&gt;
            90%
        &lt;/div&gt;
    &lt;/div&gt;

&lt;h4&gt;Striped Progress Bar&lt;/h4&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"&gt;
            50%
        &lt;/div&gt;
    &lt;/div&gt;

&lt;h4&gt;Animated Striped Progress Bar&lt;/h4&gt;
    &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"&gt;
            70%
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key Features of Bootstrap 3 Progress Bars</h3>
<ol>
<li><strong>Basic Progress Bar</strong>: A simple progress bar showing the completion percentage.</li>
<li><strong>Contextual Progress Bars</strong>: Different colors indicate different states:
<ul>
<li><code>.progress-bar-success</code> for success</li>
<li><code>.progress-bar-info</code> for informational status</li>
<li><code>.progress-bar-warning</code> for warnings</li>
<li><code>.progress-bar-danger</code> for errors</li>
</ul>
</li>
<li><strong>Striped Progress Bar</strong>: Use <code>.progress-bar-striped</code> to add stripes to the progress bar for better visual effect.</li>
<li><strong>Animated Striped Progress Bar</strong>: Adding <code>.active</code> class to create an animated effect.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Progress bars in Bootstrap 3 provide a straightforward way to visualize task completion. They are easy to implement and can be customized to fit the design of your application. By using contextual classes and styles, you can create informative and visually appealing progress indicators that enhance user experience.</p>

Web Technology View More