Bootstrap 4 Tutorial

BS4 Spinners

Last modified on: October 26, 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="63b67d84-346a-4f0f-ad7f-b9804a09877b" data-message-model-slug="gpt-4o">
<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">
<h1>Bootstrap 4 Spinners</h1>
<p>Bootstrap 4 provides two types of spinners: <strong>Border Spinners</strong> and <strong>Growing Spinners</strong>. Both types are implemented using simple HTML and CSS, making them customizable and easy to use.</p>
<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="63b67d84-346a-4f0f-ad7f-b9804a09877b" data-message-model-slug="gpt-4o">
<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">
<p>Bootstrap 4 spinners are simple, lightweight indicators for loading states in your application. They are useful for showing that content is loading or an operation is in progress, helping to improve the user experience.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Key Features of Bootstrap 4 Spinners</h2>
<ul>
<li><strong>Types of Spinners</strong>: Border and Growing spinners, each with unique animations.</li>
<li><strong>Flexible Sizing</strong>: Adjust spinner size with custom classes or inline styling.</li>
<li><strong>Color Variants</strong>: Use contextual colors to indicate different loading states (e.g., success, warning).</li>
<li><strong>Accessibility Support</strong>: Includes the <code>role="status"</code> attribute and <code>sr-only</code> text for screen readers.</li>
</ul>
<hr />
<h2>Spinner Types and Examples</h2>
<h3>1. Border Spinner</h3>
<p>The Border Spinner is a circular loader that rotates continuously. It&rsquo;s the default spinner type in Bootstrap 4.</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;div class="spinner-border" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Growing Spinner</h3>
<p>The Growing Spinner continuously scales up and down, creating a pulsating effect. This is another loading style available in Bootstrap 4.</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;div class="spinner-grow" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>Spinner Color Variants</h2>
<p>You can add color to spinners by using contextual color classes. This works for both the Border Spinner and Growing Spinner.</p>
<h3>Border Spinner with Colors</h3>
<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;div class="spinner-border text-primary" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-secondary" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-success" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-danger" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-warning" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-info" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-light" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-border text-dark" role="status"&gt;&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Growing Spinner with Colors</h3>
<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;div class="spinner-grow text-primary" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-secondary" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-success" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-danger" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-warning" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-info" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-light" role="status"&gt;&lt;/div&gt;
&lt;div class="spinner-grow text-dark" role="status"&gt;&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>Adjusting Spinner Size</h2>
<p>Bootstrap 4 spinners can be resized using utility classes like <code>.spinner-border-sm</code> or custom inline styles to define specific dimensions.</p>
<h3>Small Border Spinner</h3>
<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;div class="spinner-border spinner-border-sm" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Custom Size with Inline Styling</h3>
<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;div class="spinner-border" role="status" style="width: 3rem; height: 3rem;"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>Complete Example: Bootstrap 4 Spinners Page</h2>
<p>Here&rsquo;s an example showing various spinner types, colors, and sizes:</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 4 Spinners Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 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="sr-only"&gt;Loading...&lt;/span&gt;
        &lt;/div&gt;

&lt;!-- Growing Spinner --&gt;
        &lt;h2&gt;Growing Spinner&lt;/h2&gt;
        &lt;div class="spinner-grow" role="status"&gt;
            &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
        &lt;/div&gt;

&lt;!-- Colored Spinners --&gt;
        &lt;h2&gt;Colored Spinners&lt;/h2&gt;
        &lt;div class="spinner-border text-primary" role="status"&gt;&lt;/div&gt;
        &lt;div class="spinner-border text-success" role="status"&gt;&lt;/div&gt;
        &lt;div class="spinner-grow text-danger" role="status"&gt;&lt;/div&gt;
        &lt;div class="spinner-grow text-warning" role="status"&gt;&lt;/div&gt;

&lt;!-- Small and Custom-Sized Spinners --&gt;
        &lt;h2&gt;Small and Custom-Sized Spinners&lt;/h2&gt;
        &lt;div class="spinner-border spinner-border-sm" role="status"&gt;&lt;/div&gt;
        &lt;div class="spinner-grow" role="status" style="width: 4rem; height: 4rem;"&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More