I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Question

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Hi there! I'm looking to create a unique half circle design similar to the one showcased in this fiddle. Additionally, I want the progress bar to be displayed in a vibrant green color.

I've recently started learning about Jquery and would appreciate any guidance you can provide.

Here's the code snippet:

<div>
    <p>100%</p>
</div>

And here's the corresponding CSS:

div {
  height: 45px;
  width: 90px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  border: 5px solid red;
  border-bottom: none;
}

p { 
  text-align: center;
  padding: 20px 0;
}

You can access the fiddle here.

javascript jquery html css

Answer 1

Answer №1

Utilize jQuery's .animate() function with the step method on custom values to manage the rotation of the CSS3 .bar element using transform: rotate

$(".progress").each(function(){
  
  var $bar = $(this).find(".bar");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);

  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)",
      });
      $val.text(p|0);
    }
  });
});

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ 
  position: relative;
  overflow: hidden; 
  width: 90px; height: 45px; 
  margin-bottom: -14px; 
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px; 
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #eee;     
  border-bottom-color: #0bf;  
  border-right-color: #0bf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>10</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>100</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>34</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>67</span>%
</div>

P.S: You may not require JS since this can be achieved in pure CSS3, unless you need precise control over progress steps.

Answer 2

Utilize jQuery's .animate() function with the step method on custom values to manage the rotation of the CSS3 .bar element using transform: rotate

$(".progress").each(function(){
  
  var $bar = $(this).find(".bar");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);

  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)",
      });
      $val.text(p|0);
    }
  });
});

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ 
  position: relative;
  overflow: hidden; 
  width: 90px; height: 45px; 
  margin-bottom: -14px; 
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px; 
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #eee;     
  border-bottom-color: #0bf;  
  border-right-color: #0bf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>10</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>100</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>34</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>67</span>%
</div>

P.S: You may not require JS since this can be achieved in pure CSS3, unless you need precise control over progress steps.

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Answer №1

Similar questions

a dedicated TypeScript interface for a particular JSON schema

Acquiring HTML form data using JavaScript

Error: Unable to access the property 'fontSize' as it is undefined

A more sophisticated approach to button creation, such as utilizing a single HTML element

Prevent scale animation for a specific section of the icon using CSS

There was an issue encountered while parsing the JSON data - "SyntaxError: Unexpected token . was caught."

Transferring data from an Excel spreadsheet into a structured table

Upon script load, a random item from an array will be displayed and recorded in a separate array

Tips for gracefully organizing a sequence of requests/callbacks with the dojo framework?

What could be the reason for the three.js scene failing to render in my Svelte application?

Does the react-google-login library utilize the services provided by Google Identity?

Transforming data with D3.js into a string representation

Converting a JSON file into an HTML table using PHP

The UL list-style does not seem to be working properly on the Woocommerce checkout page

A guide on implementing arrow links in D3.js

Error message: After using gulp-npm-dist to copy only the dependency modules, the node module was not

Issues with hover menu arise following relocation of primary menu

servlet responding unexpectedly to $ajax calls

Verifying whether every value in the X array is present in the Y array or not

Is it possible for a malicious party to modify the src attribute within an iframe?