jQuery Circular Progress Bar With CSS

jQuery Circular Progress– Perhaps you think about the advancement bar, It is a graphical component that demonstrates the movement of the activity. Already I have shared a typical advancement bar which is level. In straightforward words, an advancement bar indicates 0% to chose condition’s rate with a liveliness delay. In the hover bar, there will fill stroke 0 to chose percent.

Today you will figure out how to make a redial or circle advancement bar. You can utilize this program in numerous spots like your abilities level in various fields Like you are a specialist in HTML at that point fill it above 95%, and learner in JS the fill it beneath 20%, and so forth. You can find in the see I have additionally utilized this similarly.

JavaScript Website With CSS

Along these lines, Today I am sharing jQuery Circular Progress Bar with CSS. For this program, I have utilized a jquery based library which is uniquely gained for making roundabout ground bars. With the library, we can make these sorts of advancement bars in all respects effectively. For making the entire design utilized bootstrap, on the grounds that with utilizing it we can make responsive component rapidly.

Preview 

Create A 3 Files

1- index.html

<!DOCTYPE html>
<!--Code By wpbeginnerblog ( https://wpbeginnerblog.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title> Progress Bar | wpbeginnerblog.com</title>
  
  <link href="https://fonts.googleapis.com/css?family=Staatliches&amp;display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="style.css">

</head>

<body>

  <section id="circleBar">

    <h1> Progress Bar</h1>
    <p>  Progress Bars Created Using JQuery's </p>

  <div class="container">
    <div class="row">
      <div class="col-md-3">						
        <div class="round"
          data-value="0.87"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-html5" aria-hidden="true"></i> HTML </span>
        </div>
      </div>
      <div class="col-md-3">					
        <div class="round"
          data-value="0.74"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-css3" aria-hidden="true"></i> CSS </span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.65"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-jsfiddle" aria-hidden="true"></i> Java </span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.95"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-laptop" aria-hidden="true"></i> Bootstrap </span>
        </div>
      </div>
    </div>	
  </div>
  <button class="btn" onClick="Circlle('.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>

</body>
</html>

2- style.css

/* Code By wpbeginnerblog ( https://wpbeginnerblog.com ) */

body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #0f9d58;
}
.h1, h1 {
    font-size: 36px;
    color: #fff;
}
p {
    margin: 0 0 10px;
    color: #cccccc;
    font-size: 18px;
    font-family: inherit;
    font-style: italic;
}
#circleBar {
  margin-top: 200px;
  text-align: center;
  font-family: 'Staatliches', cursive;

}

.btn.focus, .btn:focus, .btn:hover {
    background: #222;
    color: #f5f5f5;
    text-decoration: none;
}
#circleBar .round {
  min-height: 255px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
}
#circleBar .round strong {
 position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    transform: translate(-90%);
    font-size: 40px;
    color: #fff;
    font-weight: 100;
}

#circleBar span {
    display: block;
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
}

#circleBar span i {
    color: #222;
    font-size: 22px;
    margin-right: 6px;
}
section button:hover {
  background-color: #ff5c5c;
}

3- function.js

/* Code By wpbeginnerblog ( https://wpbeginnerblog.com ) */
function Circlle(el){
  $(el).circleProgress({fill: {color: '#ff5c5c'}})
    .on('circle-animation-progress', function(event, progress, stepValue){
					$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
			});  
};
Circlle('.round');

That’s It. Now you have successfully created jQuery Circular Progress Bar With CSS.


Was this post helpful?

You May Also Like

Abdul Vakeel

About the Author: Abdul Vakeel

WPBeginner Blog is a Free WordPress Resource Site For Beginners. WPBeginner Blog Was Founded in 4th June 2019 By Abdul Vakeel.

Leave a Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published.

𝐖𝐏𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐁𝐥𝐨𝐠  website uses cookies which may collect personal information. By staying here you are agreeing to our use of cookies and to our terms and conditions which includes our Privacy Policy for use of this website.L̶e̶a̶r̶n̶ ̶M̶o̶r̶e̶.