UI コンポーネントのプログレス バーのプログレス スタイルを動的なグラデーション カラーにできないという問題を解決するための代替手段

naive-UIにおけるプログレスバーラベルのグラデーションベベルの使用実績

上の図は UI コンポーネントの一般的な表示スタイルであり、指定されたコード例に基づいて色やその他のスタイルを直接変更できます。

今、特定の環境で特別なカスタマイズを行う必要があります. 現在のプロジェクトの UI 要件は: プログレス バーは段階的な色であり、一方の端はベベルです (ベベルは面倒なので、現在は代わりに大きな円弧を使用することを選択しています) ）。下の図に示すように

、上の図は動的なプログレス バーであり、色が左から右に徐々に変化します.
多くのケースを検索しましたが、同様のケースは見つかりませんでした. この点を克服する方法を記録しましょう:

 <div class="Line-progress">
                <div class="process">
                  <div
                    class="child"
                    style="
                      background-image: linear-gradient(269deg, #f02127 0%, rgba(255, 19, 19, 0.42) 100%);
                      width: 85%;
                    "
                  ></div>
                </div>
                <div class="index-area-number">300ms</div>
              </div>

対応するスタイル

 .Line-progress {
    
    
          width: 346px;
          margin-left: 15px;
          margin-right: 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          //div 实现动态渐变进度条
          .process {
    
    
            width: 100%;
            height: 10px;
            background-color: #ffffff 100%;
            border-radius: 0px;
            overflow: hidden;
            display: flex;
            .child {
    
    
              width: 85%;
              height: 10px;
              //将背景色设置为渐变色
              background-image: linear-gradient(269deg, #f02127 0%, rgba(255, 19, 19, 0.42) 100%);
              border-radius: 0 0 15px 0;
              // background-size: 20px 20px;
              animation: process 0.8s infinite linear;
            }
          }
//关键的动态效果
          @keyframes process {
    
    
            from {
    
    
              background-position: 0 0;
            }

            to {
    
    
              background-position: 200px 0;
            }
          }
          .index-area-number {
    
    
            font-size: 16px;
            font-family: PingFang-SC-Bold;
            color: #333333;
            letter-spacing: 0.4px;
          }
        }