https://github.com/cotag/orbicular
A CSS based circular progress bar for AngularJS
https://github.com/cotag/orbicular
Last synced: 9 months ago
JSON representation
A CSS based circular progress bar for AngularJS
- Host: GitHub
- URL: https://github.com/cotag/orbicular
- Owner: cotag
- License: mit
- Created: 2013-09-29T09:21:36.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-04-26T04:05:35.000Z (about 11 years ago)
- Last Synced: 2025-09-23T13:02:10.548Z (9 months ago)
- Language: CSS
- Size: 653 KB
- Stars: 47
- Watchers: 9
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Circular Progress Bar
Based on the techniques used at http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar and https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9
For cool auto-scaling UI's that require circular progression
Also have a look at this [fiddle](http://jsfiddle.net/jD74M/7/)
## Installation
1. Open bower.json
2. Add `"orbicular": "~3.0.0"` to your dependency list
3. Run `bower install`
4. In your application you can now add:
* ``
5. Import the SCSS files into your SCSS using the `@import` directive i.e.
* `@import "../../bower_components/orbicular/orbicular.scss"`
6. Include the CSS using the orbicular mixin
* `@include orbicular(options: opt-value, ..)`
## The Demo
To play with the demo included in the repo:
1. clone the repo
2. run `npm install`
3. run `bower install`
4. open `./demo/index.html` in your browser
5. run `gulp build` to update the scss
## Real World Usage
### Create your progress element
```html
Text / HTML in the circle
```
Where `$scope.downloaded` (download progress) and `$scope.size` (total size of download) are the variables used in the example to track the progress of a download. `resize` is optional and the circle will resize on window resize / rotate etc. `counterclockwise` attribute is optional, it changes the direction of the rotation.
Configure your circle using the mixin options
```scss
// All the defaults except shadow which isn't set by default
@include orbicular(
$barColor: #50a6d3, // The completed progress color
$barBg: #EEE, // The remaining progress color
$barWidth: 8, // The bar width is defined as a percentage of the width of the circle
$contentBg: #2b383f, // The circle center
$fontSize: 8, // Content font-size as a percentage of the circle size
$fontColor: #FFF, // Content text color
$transTime: 0.3s, // Time to animate the movement
$transFunc: linear, // transition timing
$shadow: 6px 6px 10px rgba(0,0,0,0.2) // optional shadow (not default)
);
// for further customizations to the circle content use:
// You can add your own id's and classes to the element too
orbicular, [orbicular] {
div.co-content > div > div > div {
font-weight: bold;
// and any other divs' etc.
}
}
```
### Element size
The circles size is based on the width of the parent element.
This size is static and is set at the following times:
* when the directive is linked
* on the $broadcast of `'orb width'` to the elements scope
if you set the optional `resize` attribute on the element then it'll also resize on
* on mobile device rotation
* when the browser window is resized
Broadcasting or emitting should be used to programmatically resize circles
## Upgrading from version 2.x.x to 3.x.x
* Change the SCSS to use the mixin
* Add a `resize` attribute if it should resize automatically
## Upgrading from version 1.x.x to 2.x.x
There is a single breaking change: (resolving a conflict with bootstrap UI)
* `progress="downloaded"` changes to `progression="downloaded"`