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:
Dynamic Star Rating in JavaScript
jQuery Plugin to Create Animated Bar Chart
HTML Table with Fixed Header and Scrollable body
Simple Financial Ledger in jQuery
JavaScript Timesheet Calculator
Responsive Pricing Table using Bootstrap
Bootstrap Notification Bar with Close Button
jQuery Scroll to Next Section on Scroll - snapScroll.js
Simple To Do List Using jQuery and CSS
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.