→ 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.1k

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

Split Landing Page
Split Landing Page

Author:
Rami AlAjo

2 months ago

466

v.4.6
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

2 months ago

829

v.4.6
progress-steps
progress-steps

Author:
Rami AlAjo

2 months ago

454

v.4.6
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

1k

v.5.3
Resume template
Simple and elegant resume template

Author:
Juan Martinez

10 months ago

404

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

9 months ago

7.2k

v.5.3
Elegant Product Showcase Component

Author:
Anonymous

6 months ago

890

v.5.3
Pricing Cards with Hover Effects
Clean and elegant pricing comparison component with Bootstrap 5.3

Author:
Isaac Winslow

5 months ago

558

v.5.3
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

9 months ago

579

v.5.3
progress-steps
progress-steps

Author:
Rami AlAjo

2 months ago

454

v.4.6
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

9 months ago

4.4k

v.5.3
Calender

Author:
Anonymous

9 months ago

671

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent