Skip to content
⭕️ CSS percentage circle built with jQuery
Branch: master
Clone or download
thodorisbais Merge pull request #56 from whoisme555/master
Allowed users to display text in circle even when the number is 0
Latest commit 1011130 Jun 15, 2019

README.md

percircle

CSS percentage circle built with jQuery

Demo

Maintainers Wanted!


Custom circles

<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>

Custom


Update value dynamically

Declare your html

<div class="clearfix">
    <div id="redBecomesBlue" class="red big"></div>
</div>
<a href="javascript:void(0);" id="changeCircle">Fill Circle to 95.5</a>

Big blue circle

Handle the click in the script

$(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"
    });
}

Usage

1. Load the module to your page

<!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>

2. Define the circle objects

Big blue circle marked with a percent of 50%:

<div id="bluecircle" data-percent="17" class="big">
</div>

Big blue circle

3. Let the script get the job done

<script type="text/javascript">
    $(function(){
        $("#bluecircle").percircle();
    });
</script>

npm

Percircle is registered as an npm package and can be installed with:

npm install percircle

Bower

Percircle is also registered as a Bower package, so it can be pulled down using:

bower install percircle

Building Percircle Locally

If you'd like to run the development version, percirle uses Gulp to automate basic tasks, like building. Head over to https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md for more information. First, clone the repository, then run:

npm install -g gulp
npm install

# Watches the js files for changes, while linting them concurrently 
gulp watch

# Runs jshint and builds a minified version of the files.
gulp

Contribute

Contributions are more than welcome. Please ensure that you spent some time reading our Contributor's Guidelines.

Contributors

toubou91 chrisahardie chris--jones tinglu tranthanhhoa ahmadajmi Sylphony yireo
toubou91 chrisahardie chris--jones tinglu tranthanhhoa ahmadajmi Sylphony yireo

Credits

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.

You can’t perform that action at this time.