Reactjs 按动态百分比设置从下到上填充圆的动画

我正在开发一个程序，该程序表示属于某一细分市场的人群的百分比（想想饼图）。但是，我不想使用饼图，我想画带标签的圆圈，并用颜色填充圆圈，并用百分比表示同情。那部分我已经弄明白了

但是，圆的值可以根据用户输入而改变，我希望有一个动画，可以使圆的“填充”随着输入的改变而上升或下降。我主要是一个后端开发人员，几乎没有动画方面的经验，我感觉自己在旋转轮子

我的前端是React。目前，每个圆都是一个React组件，我将“百分比”属性传递给它。然后，我为圆指定一个线性渐变，该渐变根据通过的百分比而变化。这将使圆圈充满适当的量

我在过去使用过的几乎所有动画（如果你真的可以这样称呼的话）都使用了转场。然而，我的研究让我相信线性渐变是无法转换的——这让我要么不得不重做我的圆圈代码（我对它很开放，只是不知道怎么做），要么想出一个解决办法来设置线性渐变的动画

render() {
    let circleStyle = {
      background: `linear-gradient(transparent ${100-this.props.percent}%, ${this.props.color} ${100-this.props.percent}%)`
    };

    return (
      <div className="circle-container">
        <div className="circle" style={circleStyle} onClick={this.props.onClick}>
        <div className="circle-info">
          <p className="circle-text">{this.props.percent}%</p>
          <p className="circle-text-hidden">CU Avg: {this.props.industryPercent}%</p>
          {strike}
        </div>
        </div>
        <h1>{this.props.segmentName}</h1>

      </div>
    ) 

render（）{
设圆圈样式={
背景：`线性渐变（透明${100 this.props.percent}%，${this.props.color}${100 this.props.percent}%）`
};
返回(
{this.props.percent}%
CU平均值：{this.props.industryPercent}%

{罢工}
{this.props.segmentName}
) 

---

希望我能得到一些睿智的React/CSS大师的建议，告诉我最好的方法。它在一个奇怪的山谷中，感觉它应该是世界上最简单的东西，但我不能停止用我的头撞击它。

我建议在圆圈内放置第二个div，并设置其高度的动画，这可以是tr与CSS有关。在没有看到CSS及其外观的情况下，很难准确地说出将其放置在何处，但我可以想象它可能是这样的：

render() {
    let gradient = background: `linear-gradient(transparent , ${this.props.color} 100%)`;


    return (
      <div className="circle-container">
        <div className="circle" onClick={this.props.onClick}>
        <div className="circle-fill" style={{ background: gradient, height: this.props.percent + '%'}}
        <div className="circle-info">
          <p className="circle-text">{this.props.percent}%</p>
          <p className="circle-text-hidden">CU Avg: {this.props.industryPercent}%</p>
          {strike}
        </div>
        </div>
        <h1>{this.props.segmentName}</h1>

      </div>
    ) 

render（）{
让梯度=背景：`线性梯度（透明，${this.props.color}100%）`；
返回(
谢谢！就像你预测的那样，这需要一些CSS。我以前非常依赖flexbox，重叠多个div的必要性意味着我的设置需要重新调整。现在一切都按照我的意愿进行！