→ 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

304

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

Spinner buttons
Loading spinner buttons

Author:
Mishti

7 months ago

264

v.5.3
User Avatar Example

Author:
Anonymous

8 months ago

974

v.4.6
Premium Gradient Pricing Card
An eye-catching subscription component with interactive hover effects and clear feature presentation

Author:
Mason Ashford

1 week ago

27

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

4 months ago

250

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

8 months ago

263

v.5.3
Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

5 months ago

318

v.4.6
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

2 months ago

216

v.4.6
Product Card Component
Minimal Product Card

Author:
Juniper

1 month ago

211

v.5.3
404 page template

Author:
Valeria González

3 months ago

889

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

1 week ago

128

v.5.3
Responsive Admin Dashboard Component

Author:
Isaac Winslow

1 week ago

25

v.5.3
Simple comment form using Bootstrap 5

Author:
Anonymous

4 months ago

533

v.5.3

Didn't find component you were looking for?

Search from 210+ componenent