More default CSS animation styles customization options

[q3e]

What do you think of adding multiple CSS transition or animation styles, like stripes?

I cannot seem to add such custom styles using classNames or inline styles easily without having to go and make changes to the following code.

const style = {
      opacity: '1',
      transform: `scaleX(${this.state.percent / 100})`,
      transformOrigin: 'left',
      transition: `transform ${animationTime}ms linear`,
      width: '100%',
      willChange: 'transform, opacity',
    }

    // Use default styling if there's no CSS class applied
    if (!this.props.className) {
      style.height = '3px'
      style.backgroundColor = 'red'
      style.position = 'absolute'
    }

[mironov]

@bnovf I changed the animation style in v2.9.0 to make it smoother: https://github.com/mironov/react-redux-loading-bar/commit/cfb35014376fbd7c01e2a04f5b1a04573a46113a

If you want to use some complex backgrounds like stripes, you have to revert to the previous approach but it's not that smooth as the scaleX animation. For the most cases the current animation style behaves better, so I'd rather keep it.

I'm open for a discussion how the animation can be implemented to serve all cases.