Package Exports

progress-circle-gradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (progress-circle-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

circular-progress-angular-gradient

Samples

A React Component generates SVG circular progress-bar. Animation uses CSS3 transition.

Installation

The easiest way to use circular-progress-angular-gradient is to install it from NPM and import it in your own React Component.

npm install circular-progress-angular-gradient --save

Usage

import Progress from 'circular-progress-angular-gradient';

<div>Awesome Progress <Progress percentage={0.5}/></div>

paste following styles into your project styles for progress animation:

@keyframes load {0% {stroke-dashoffset: 0;} }

.circular-progress {
  .filling-gradient {animation: load 4s ease-in-out;}
  // transform: scale(-1, 1); // horizontal mirroring if needed
}

Properties

'colorEmpty': Color of the empty part of progress-bar. String with hex color code or 'transparent'. For example - '#37354F',
'colorFill': Color of the progress inner part filling. String with hex color code or 'transparent'. For example - '#FADB4D',
'colorEnd': Color of the gradient end. String with hex color code. For example - '#FADB4D',
'colorStart': Color of the gradient start. String with hex color code. For example - '#E64D59',
'percentage': Percentage of progress-bar filling. Float, from 0 to 1. For example - 0.3,
'strokeLinecap': Type of filling stroke line ending. Valid values - ['butt', 'round', 'square'],
'strokeWidth': Width (px) of stroke line. Integer. For example - 17,
'width': Width (px) of progress-bar. Integer. For example - 160

Examples

<Progress
  colorEmpty: '#37354F',
  colorFill: '#FFFFFF',
  colorEnd: '#FADB4D',
  colorStart: '#E64D59',
  percentage: {0.4},
  strokeLinecap: 'round',
  strokeWidth: {17},
  width: {160}
/>

Notes

If using on mobile, don't forget the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

License

See LICENSE.txt for details.