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: [last-modified]

MIT

Fork on CodePen

8,374

Demo Download

[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]

Similar Code Snippets:

Asif Mughal

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.

Plugin Overview and Preview

How to Create Bootstrap Circle Progress Bar Animation

Similar Code Snippets:

Leave a Comment Cancel reply