Yet another code snippet for Bootstrap to create a circle progress bar animation. The code contains a lightweight jQuery function and some CSS styels that build circular/radial prgress bar loading animation.
This radial progress bar animation can be used to indicate the visual status of a process. Similarly, it is also suitable for body or part of page loading animation.
Plugin Overview and Preview
Plugin: | Circle Progress Bar Animation |
Author: | Rick Smoke |
Category: | Others |
Published: | January 20, 2024 |
File Type: | zip archive (HTML, CSS & JavaScript ) |
Package Size: | File not found! |
Dependencies: | jQuery 3.0 or Latest version and Bootstrap 4.1.3 |

How to Create Bootstrap Circle Progress Bar Animation
1. First of all, load the jQuery and Bootstrap into your HTML page in order to build circular progress bar animation.
- <!-- jQuery -->
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
- <!-- Bootstrap CSS -->
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
- <!-- Bootstrap JS -->
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
2. In next step, include the Circle Progress Bar Animation’s CSS file in your website/app project.
- <!-- Circle Progress Bar Animation CSS -->
- <link rel="stylesheet" href="css/.css">
3. Create HTML structure for circle progress bar like below:
- <div class="modal js-loading-bar">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-body">
- <div class="progress blue">
- <span class="progress-left">
- <span class="progress-bar"></span>
- </span>
- <span class="progress-right">
- <span class="progress-bar"></span>
- </span>
- <div class="progress-value">Loading...</div>
- </div>
- </div>
- </div>
- </div>
4. Finally, add the following jQuery code snippet to active the progress bar animation.
- $(document).ready(function(){
- this.$('.js-loading-bar').modal({
- backdrop: 'static',
- show: false
- });
- $('#load').click(function() {
- var $modal = $('.js-loading-bar'),
- $bar = $modal.find('.progress');
- $modal.modal('show');
- $bar.addClass('animate');
- setTimeout(function() {
- $bar.removeClass('animate');
- $modal.modal('hide');
- }, 7000);
- });
- });
Similar Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.