Gradient fill?

[Tsury]

Is it possible to have a gradient as the fill color of the progress bar? For instance I want the left part to be blue and the right part to be white. I know I can 'transition' the color from blue to white, but I want to have a gradient color.

[kyleparrott]

Hi @Tsury,

Piecing together the readme example and a gradient example from the main progressbar.js project, a simple addition to options works to create a gradient from green to red:

render() {
    var options = {
      strokeWidth: 2,
      from: { color: '#7ED321'  },
      to: { color: '#FF0000' },
      step: (state, bar) => {
        bar.path.setAttribute('stroke', state.color);
      }
    };

    // For demo purposes so the container has some dimensions.
    // Otherwise progress bar won't be shown
    var containerStyle = {
      width: '200px',
      height: '200px'
    };

    return (
      <Line
        progress={this.state.progress}
        text={'test'}
        options={options}
        initialAnimate={true}
        containerStyle={containerStyle}
        containerClassName={'.progressbar'} />
    );
  }

[Tsury]

Thanks!