Circular Progress Bar Using HTML, CSS, and JavaScript

Hello Coders,

In this article, we will be learning to create a circular progress bar. JavaScript decides the behavior of the code. When calculate button is pressed the progress is calculated we have provided three circular progress bars, one for HTML next one is for CSS and the last one is for javascript. Copy and paste the below codes into three separate files.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css?family=Staatliches&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'>

    <title>Circular Progress Bar | www.codeithub.com</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <section id="circleBar">

        <h1>Circular Progress Bar</h1>

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <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 Skill</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <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 Skill</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <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> JavaScript Skill</span>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn" onClick="Circlle('.round');">Calculate</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>

CSS Code:

/*www.codeithub.com*/
#circleBar {
    margin-top: 200px;
    text-align: center;  
  }
  #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(-50%);
    font-size: 40px;
    color: #3f3a3a;
    font-weight: 100;
  }
  #circleBar span {
    display: block;
    color: #999;
    font-size: 16px;
    margin-top: 10px;
  }
  #circleBar span i {
    color: #092352;
    font-size: 22px;
    margin-right: 6px;
  }
  section button:hover {
    background-color: #092352;
  }
  .btn:hover{
    color:white;
  }

JavaScript Code:

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

OUTPUT

See also  Create A Multi-Level Drop Down Menu with Pure CSS

Examples: Blog Card Slider using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *