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
Installation
- Open bower.json
- Add
"orbicular": "~3.0.0"
to your dependency list - Run
bower install
- In your application you can now add:
<script src="bower_components/orbicular/orbicular.js"></script>
- Import the SCSS files into your SCSS using the
@import
directive i.e.@import "../../bower_components/orbicular/orbicular.scss"
- Include the CSS using the orbicular mixin
@include orbicular(options: opt-value, ..)
The Demo
To play with the demo included in the repo:
- clone the repo
- run
npm install
- run
bower install
- open
./demo/index.html
in your browser - run
gulp build
to update the scss
Real World Usage
Create your progress element
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
// All the defaults except shadow which isn't set by default // for further customizations to the circle content use: // You can add your own id's and classes to the element too orbicular,
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 toprogression="downloaded"