CSS percentage circle built with jQuery
<div id="custom" class="yellow big"></div>
<div id="clock" class="purple big"></div>
<div id="custom-color" class="big"></div>
<div id="countdown" class="big"></div>
<div class="clearfix">
<div id="redBecomesBlue" class="red big"></div>
</div>
<a href="javascript:void(0);" id="changeCircle">Fill Circle to 95.5</a>
$(document).ready(function(){
$("#redBecomesBlue").percircle({percent: 25,text: "25"});
$('#changeCircle').click(function(e){
e.preventDefault();
changeCircle();
});
});
function changeCircle(){
$("#redBecomesBlue").percircle({text:''});
$("#redBecomesBlue").percircle({
text: "",
percent: 95.5,
progressBarColor: "#1252c0"
});
}<!DOCTYPE HTML>
<html>
<head>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/percircle.js"></script>
<link rel="stylesheet" href="../dist/css/percircle.css">
</head>
</html>Big blue circle marked with a percent of 50%:
<div id="bluecircle" data-percent="17" class="big">
</div>
<script type="text/javascript">
$(function(){
$("#bluecircle").percircle();
});
</script>Percircle is registered as an npm package and can be installed with:
npm install percircle
Percircle is also registered as a Bower package, so it can be pulled down using:
bower install percircle
| Option | Description | via configuration object | via data attribute | Default |
|---|---|---|---|---|
| Animate | Whether to animate the progress bar on load (or view) | { animate: "true" } |
data-animate="true" | true |
| Clock | Display a clock in the percircle | { perclock: true} |
data-perclock="true" | false |
| Countdown | Display a countdown in the percircle | { perdown: true} |
data-perdown="true" | false |
| Countdown seconds | The amount of seconds to countdown. | { secs: 15 } |
data-secs="15" | - |
| Countdown time up text | Text to display when countdown has completed. | { timeUpText: 'Complete!' } |
data-timeUpText="Complete!" | - |
| Countdown reset on click | Whether to reset the countdown on percircle click | { reset: true } |
data-reset="true" | false |
| Display text at zero | Whether to display text even when the percentage is 0 | { displayTextAtZero: true } |
n/a | false |
| Progress bar color | The colour of the progress bar | { progressBarColor: '#6188ff' } |
data-progressBarColor="#6188ff" | empty (inherit from class or css) |
| Text | Text to display inside the percirle | { percent: 65 } |
data-percent="65" | undefined (use percent value) |
If you'd like to run the development version, percircle uses Webpack to handle build tasks like bundling and minification.
First, clone the repository, then run:
# Install the dependencies
npm install
# Launch webpack dev server, whilst watching for any js or css changes
npm start
Contributions are more than welcome. Please ensure that you spent some time reading our Contributor's Guidelines.
 |
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|---|
| toubou91 | chrisahardie | chris--jones | tinglu | tranthanhhoa | ahmadajmi | Sylphony | yireo |
The original project was created from Andre Firchow and as I didn't find any similar here, I uploaded it.
However, the project loaded all the css transformations, in the percircle.css file. Now, it uses jQuery to apply repeated functionality where needed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent