HomeBootstrap4 Cool Circle Bootstrap Progress Bars using HTML CSS and JS

4 Cool Circle Bootstrap Progress Bars using HTML CSS and JS

bootstrap progress bar

4 Circle Bootstrap Progress Bars using HTML CSS and JS

As you can see on top, There are Four Different Styles of Circle Bootstrap Progress Bars. Progress Bar is Mostly used for Uploading and Downloading a file from the Internet. A progress bar can be different types like a circle progress bar, striped progress bar, stacked, and animated progress bar, etc. The circular progress bars show you a good-looking and visually compelling way to showcase a single statistic.

In this program (circle bootstrap progress bar using HTML CSS and JS), there are four different circle bootstrap progress bars on the webpage with different percent, and whenever you click on the given below refresh button on the page, the circle graph fills to the percentage-based location that you defined before. These bars are fully responsive to any device like an iPhone mobile, tablet, and other small mobiles, PC, etc.

Circle Bootstrap Progress Bar (Source Code)

First, create an HTML file with the name of index.html and paste the given codes into your HTML file.it is not compulsory to make file name index.html. You can have a different file name as you want. But Remember that the file extension must be .html.

Second, create a file with the name of style.css and paste the all given CSS codes in your CSS file. Remember, you have to create this file with .css extensions. CSS code is very important for every webpage because CSS code is used to do some styling to that HTML file.

Third, create a JS file with the name of script.js and paste the given codes in your created JS file. Remember, you must have to create a file with .js extensions. Otherwise, the JS file will not properly work.

 I have given below the important source codes, you can copy them by simply click on the copy codes button. In the given HTML code copy two important link files and add them in the head section of the HTML file.

HTML:

 
      <!-- Add two link files in head section of html code. -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald
          &display=swap">
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap
        /3.3.7/css/bootstrap.min.css'>
      <section id="ProgressCircleBar">
    <h1>Circle Bootstrap Progress Bar</h1>
  <div class="container">
    <div class="row">
      <div class="col-md-3">						
        <div class="round"
          data-value="0.32"
          data-size="200"
          data-thickness="20">
          <strong></strong>
          <span>Speaking Skill</span>
        </div>
      </div>
      <div class="col-md-3">					
        <div class="round"
          data-value="0.49"
          data-size="200"
          data-thickness="20">
          <strong></strong>
          <span>Writing Skill</span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.69"
          data-size="200"
          data-thickness="20">
          <strong></strong>
          <span>Listening Skill</span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.97"
          data-size="200"
          data-thickness="20">
          <strong></strong>
          <span>Reading Skill</span>
        </div>
      </div>
    </div>	
  </div>
  <button class="btn" onClick="Circle('.round');">Refresh</button>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.min.js'></script>
<script  src="function.js"></script>
    

CSS:

      body{
background: rgb(16,155,244);
background: linear-gradient(90deg, rgba(16,155,244,1) 0%, rgba(0,255,239,1) 95%);
    }
#ProgressCircleBar {
  margin-top: 200px;
  text-align: center;
  font-family: 'Oswald', cursive;

}
#ProgressCircleBar .round {
  min-height: 255px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
}
#ProgressCircleBar .round strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transform: translate(-50%);
  font-size: 40px;
  color: #212121;
  font-weight: 100;
}
#ProgressCircleBar span {
  display: block;
  color: #212121;
  font-size: 16px;
  margin-top: 10px;
}
button{
    width:90px;
    height:50px;
}
    

JavaScript:

       function Circle(el){
  $(el).circleProgress({fill: {color: '#07fa48'}})
    .on('circle-animation-progress', function(event, progress, stepValue){
					$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
			});  
};
Circle('.round');
    
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular