→ 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

958

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

progress-steps
progress-steps

Author:
Rami AlAjo

1 month ago

326

v.4.6
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

1 month ago

663

v.4.6
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

1 month ago

351

v.4.6
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

965

v.5.3
Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

9 months ago

673

v.5.3
Audio player with bootstrap

Author:
Arturo

4 months ago

1.4k

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

Author:
Mishti

9 months ago

1.4k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

7 months ago

4.5k

v.4.6
Customer testimonials
modern and clean customer review section

Author:
Anonymous

4 months ago

850

v.5.3
Responsive Testimonials

Author:
Anonymous

8 months ago

757

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

1 year ago

1.1k

v.5.3
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

1 year ago

999

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent