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.

Plugin Overview and Preview

Plugin: Circle Progress Bar Animation
Author: Rick Smoke
Category: Others
Published: 2 months ago
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
540

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);
});
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*


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