This is a simple directive as created as part of the Fullscreen Creator Platform. It's intended to be used with percentages to just show completion status in a less... progressy-bar kind of way. It doesn't rely on any libraries outside of Angular itself. The arc is drawn using the
arc() method on the Canvas API.
bower install https://github.com/brandonaaskov/angular-radial.git
bower_components folder lives, you'll see an angular-radial folder in there. If you want to use the compressed build files, check the
build directory. If you want to use the source file, all you need is the
angular-radial.js file in the
All the Options
<radial percent-complete="myPercentageValue" font-family="'Comic Sans', 'Marker Felt', sans_serif" radius="180" line-width="75" line-cap="round" bg-color="e0f1cb" color="9ad154"></radial>
note: please never use comic sans or marker felt in production
You can see the examples by going to the demo site (note: you don't need Firebase for this app - they just have a dead-simple deployment process so I used them). If you're developing locally, then running
gulp should start up a localhost server for you running on port 3000.