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:

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=""></script>
<!-- Bootstrap CSS -->
<link href="" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="" 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 class="progress-right">
                    <span class="progress-bar"></span>
                  <div class="progress-value">Loading...</div>


4. Finally, add the following jQuery code snippet to active the progress bar animation.

  backdrop: 'static',
  show: false

$('#load').click(function() {
  var $modal = $('.js-loading-bar'),
      $bar = $modal.find('.progress');

  setTimeout(function() {
  }, 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.