Bootstrap Circle Progress Bar Animation

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.

[intro_ad]

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: 6 KB
Dependencies: jQuery 3.0 or Latest version and Bootstrap 4.1.3
Last Modified:
MIT
7,893
[ad_after_overview]

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);
});
});
[ad_after_artical]

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X