Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teobais/percircle
:o: CSS percentage circle built with jQuery
https://github.com/teobais/percircle
circle css css-percentage-circle javascript jquery jquery-plugin percent percentage-bar percentage-circle percentage-progress-circle progress-bar progress-circle
Last synced: 1 day ago
JSON representation
:o: CSS percentage circle built with jQuery
- Host: GitHub
- URL: https://github.com/teobais/percircle
- Owner: teobais
- License: mit
- Created: 2015-08-30T22:19:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T02:28:22.000Z (almost 2 years ago)
- Last Synced: 2024-12-08T18:33:34.843Z (14 days ago)
- Topics: circle, css, css-percentage-circle, javascript, jquery, jquery-plugin, percent, percentage-bar, percentage-circle, percentage-progress-circle, progress-bar, progress-circle
- Language: JavaScript
- Homepage: https://teobais.github.io/percircle/
- Size: 10.2 MB
- Stars: 227
- Watchers: 10
- Forks: 67
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# percircle
> CSS percentage circle built with jQuery
# [Demo](https://teobais.github.io/percircle)
> ## [Maintainers Wanted!](https://github.com/teobais/percircle/issues/43)
---
### Custom circles
```html
```
### Update value dynamically
#### Declare your html
```html
Fill Circle to 95.5
```
#### Handle the click in the script
```js
$(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
```html
```
#### 2. Define the circle objects
Big blue circle marked with a percent of 50%:
```html
```
#### 3. Let the script get the job done
```html
$(function(){
$("#bluecircle").percircle();
});
```
### 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
```
### Options
| 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) |
### Building Percircle Locally
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
### Contribute
Contributions are more than welcome. Please ensure that you spent some time reading our [Contributor's Guidelines](https://github.com/teobais/percircle/blob/master/CONTRIBUTING.md).
### Contributors
[
](https://github.com/teobais) |[
](https://github.com/chrisahardie) |[
](https://github.com/chris--jones) |[
](https://github.com/tinglu) |[
](https://github.com/tranthanhhoa) |[
](https://github.com/ahmadajmi) |[
](https://github.com/Sylphony) |[
](https://github.com/yireo) | [
](https://github.com/miller-kevin)
:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
[teobais](https://github.com/teobais)|[chrisahardie](https://github.com/chrisahardie)|[chris--jones](https://github.com/chris--jones)|[tinglu](https://github.com/tinglu)|[tranthanhhoa](https://github.com/tranthanhhoa)|[ahmadajmi](https://github.com/ahmadajmi)|[Sylphony](https://github.com/Sylphony)|[yireo](https://github.com/yireo)|[miller-kevin](https://github.com/miller-kevin)|
### 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.