Bootstrap 5 Tutorial

Bootstrap 5 Spinners

Last modified on: October 27, 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="721e6ad8-8f16-4c09-a15c-1973a8caa120" 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 5: Spinners</h3>
<p>Spinners in Bootstrap 5 are used to indicate loading states or ongoing processes within your application. They provide visual feedback to users when actions take time to complete, enhancing the user experience by letting them know that something is happening.</p>
<hr />
<h3>Key Features of Bootstrap 5 Spinners</h3>
<ol>
<li><strong>Multiple Styles</strong>: Bootstrap 5 offers various spinner styles, including border spinners and grow spinners.</li>
<li><strong>Size Variants</strong>: You can easily adjust the size of the spinners to fit your design.</li>
<li><strong>Alignment</strong>: Spinners can be easily aligned within buttons or other elements.</li>
<li><strong>Accessibility</strong>: Spinners are designed with accessibility in mind, ensuring they are usable for all users.</li>
</ol>
<hr />
<h3>Example: Creating Spinners in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create and use spinners in Bootstrap 5:</p>
<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.0"&gt;
    &lt;title&gt;Bootstrap 5 Spinners Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Spinners&lt;/h1&gt;

&lt;!-- Border Spinner --&gt;
        &lt;h2&gt;Border Spinner&lt;/h2&gt;
        &lt;div class="spinner-border" role="status"&gt;
            &lt;span class="visually-hidden"&gt;Loading...&lt;/span&gt;
        &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Grow Spinner --&gt;
        &lt;h2&gt;Grow Spinner&lt;/h2&gt;
        &lt;div class="spinner-grow" role="status"&gt;
            &lt;span class="visually-hidden"&gt;Loading...&lt;/span&gt;
        &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Spinners with Custom Sizes --&gt;
        &lt;h2&gt;Custom Size Spinners&lt;/h2&gt;
        &lt;div&gt;
            &lt;div class="spinner-border spinner-border-sm" role="status"&gt;
                &lt;span class="visually-hidden"&gt;Loading...&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="spinner-border" role="status"&gt;
                &lt;span class="visually-hidden"&gt;Loading...&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="spinner-border spinner-border-lg" role="status"&gt;
                &lt;span class="visually-hidden"&gt;Loading...&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Spinner in Button --&gt;
        &lt;h2&gt;Spinner in Button&lt;/h2&gt;
        &lt;button class="btn btn-primary" type="button" disabled&gt;
            &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
            Loading...
        &lt;/button&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Spinner Classes</strong>: The <code>.spinner-border</code> class creates a border spinner, while <code>.spinner-grow</code> creates a grow spinner.</li>
<li><strong>Role and Accessibility</strong>: The <code>role="status"</code> attribute indicates that the spinner represents a loading state, and the <code>&lt;span class="visually-hidden"&gt;</code> provides accessible text for screen readers.</li>
<li><strong>Custom Sizes</strong>: Use <code>.spinner-border-sm</code> for small spinners and <code>.spinner-border-lg</code> for larger ones.</li>
<li><strong>Spinner in Buttons</strong>: You can embed spinners within buttons to indicate loading states for actions initiated by the user.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More