DocsAllOver Jumping Dots Loading Animation in Bootstrap 5 Snippets

Jumping Dots Loading Animation in Bootstrap 5

Oct. 8, 2024

Bootstrap, Bootstrap 5, Animation, Loading Animation

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body>
    <div class="page-content page-container" id="page-content">
        <div class="padding">
            <div class="row container d-flex justify-content-center">
                <div class="col-md-4 col-sm-6 grid-margin stretch-card">
                    <div class="loader-demo-box">
                        <div class="jumping-dots-loader"> <span></span> <span></span> <span></span> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'></script>
</body>

</html>

body {
    background-color: #f9f9fa;
    margin-top: 200px;
}

.flex {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

@media (max-width:991.98px) {
    .padding {
        padding: 1.5rem
    }
}

@media (max-width:767.98px) {
    .padding {
        padding: 1rem
    }
}

.padding {
    padding: 5rem
}

.card {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none
}



.border-secondary,
.loader-demo-box {
    border-color: #a3a4a5 !important
}

.rounded,
.loader-demo-box {
    border-radius: 0.25rem !important
}

.loader-demo-box {
    width: 100%;
    height: 200px
}

.jumping-dots-loader {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto
}

.jumping-dots-loader span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: rgba(241, 83, 110, 0.8);
    margin: 35px 5px
}

.jumping-dots-loader span:nth-child(1) {
    animation: bounce 1s ease-in-out infinite
}

.jumping-dots-loader span:nth-child(2) {
    animation: bounce 1s ease-in-out 0.33s infinite
}

.jumping-dots-loader span:nth-child(3) {
    animation: bounce 1s ease-in-out 0.66s infinite
}

@keyframes bounce {

    0%,
    75%,
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    25% {
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

//Doesn't require any JS.

This Bootstrap 5 snippet provides a visually engaging and dynamic loading animation using jumping dots. It's a simple yet effective way to indicate that a process is in progress and provide feedback to the user. The animation is designed to be customizable and responsive, ensuring a pleasant user experience across different devices.

Key Features:

Visual Appeal: The jumping dots animation creates a visually interesting and engaging loading experience.
Customizable Appearance: Easily modify the color, size, and spacing of the dots to match your website's design.
Responsive Design: The animation adapts to different screen sizes, ensuring a consistent appearance and behavior across devices.
Lightweight and Efficient: The code is optimized for performance, providing a smooth and efficient loading experience.

Implementation:

Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the loading animation, including the container and individual dot elements.
Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and behavior of the jumping dots animation according to your specific requirements.

Latest Snippets

View All