→ Anonymous
→ Beautiful Spinners made with Bootstrap 5

Beautiful Spinners made with Bootstrap 5

collection of loading spinners

This bootstrap css example is contributed by Anonymous, on 16-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are loading, loader

Tags: Spinner / Loading

Author Anonymous

1.4k

v.5.3

Fork Fullscreen

<div class="container mt-5" style="max-width:400px">
    <h1 class="text-center mb-4">Beautiful Bootstrap 5 Spinners</h1>

<div class="spinner-container">
        <h3>Basic Spinners</h3>
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-secondary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-warning" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-info" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

<div class="spinner-container">
        <h3>Growing Spinners</h3>
        <div class="spinner-grow text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-secondary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-success" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-warning" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-info" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

<div class="spinner-container">
        <h3>Sized Spinners</h3>
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

<div class="spinner-container">
        <h3>Buttons with Spinners</h3>
        <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Loading...
            </button>
        <button class="btn btn-success" type="button" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                Loading...
            </button>
    </div>
</div>

More Examples

Blurry Loading
Blurry Loading

Author:
Rami AlAjo

4 months ago

1.2k

v.4.6
progress-steps
progress-steps

Author:
Rami AlAjo

4 months ago

850

v.4.6
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

1.4k

v.5.3
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

4 months ago

835

v.4.6
Horizontal Steps (Interactive)
Stepper component with Navigation buttons

Author:
Aisha Bello

6 months ago

3.7k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

11 months ago

618

v.4.6
Customer testimonials
modern and clean customer review section

Author:
Anonymous

7 months ago

1.6k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

6 months ago

2.1k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

8 months ago

2k

v.5.3
Modern Bootstrap Search Bar

Author:
Anonymous

7 months ago

3.7k

v.5.3
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

7 months ago

3k

v.5.3
Beutifull Comment Section Bootstrap - 5
The comment section for your website

Author:
Asmath

6 months ago

4.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent