CSS3 を使用して色付きのプログレスバーアニメーションを実装する例

<div class="コンテナ">    
  <div class="progress progress-striped">
    <div class="プログレスバー">
    </div>                       
  </div> 
</div>

<div class="コンテナ">    
  <div class="progress2 進捗状況が移動されました">
    <div class="プログレスバー2" >
    </div>                       
  </div> 
</div>

<div class="コンテナ">    
  <div class="progress 進行状況無限">
    <div class="progress-bar3" >
    </div>                       
  </div> 
</div>

体 {
  フォントファミリー: 'Montserrat'、サンセリフ;
  背景: #2c303a;
}

。容器 {
  マージン: 100px 自動;
  幅: 500ピクセル;
  テキスト配置: 中央;
}

。進捗 {
  パディング: 6px;
  背景: rgba(0, 0, 0, 0.25);
  境界線の半径: 6px;
  ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.プログレスバー{
  高さ: 18px;
  背景色: #ee303c;
  境界線の半径: 4px;
  遷移: 0.4 秒線形;
  遷移プロパティ: 幅、背景色;
}

.progress-striped .progress-bar {
  背景色: #FCBC51;
  幅: 100%;
  背景画像: linear-gradient(45度、#fca311 25%、透明 25%、透明 50%、#fca311 50%、#fca311 75%、透明 75%、透明);
  アニメーション: progressAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
  から {
    幅: 0;
  }
  に {
    幅: 100%;
  }
}
.progress2 {
  パディング: 6px;
  境界線の半径: 30px;
  背景: rgba(0, 0, 0, 0.25);
  ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.プログレスバー2 {
  高さ: 18px;
  境界線の半径: 30px;
  背景画像: linear-gradient(下へ、rgba(255, 255, 255, 0.3)、rgba(255, 255, 255, 0.05));
  遷移: 0.4 秒線形;
  遷移プロパティ: 幅、背景色;
}

.progress-moved .progress-bar2 {
  幅: 85%;
  背景色: #EF476F;
  アニメーション: progressAnimation 6秒;
}

@keyframes 進捗アニメーション {
  0% {
    幅: 5%;
    背景色: #F9BCCA;
  }
  100% {
    幅: 85%;
    背景色: #EF476F;
  }
}
.プログレスバー3 {
  高さ: 18px;
  境界線の半径: 4px;
  背景画像: 線形グラデーション(右、#4cd964、#5ac8fa、#007aff、#7DC8E8、#5856d6、#ff2d55);
  遷移: 0.4 秒線形;
  遷移プロパティ: 幅、背景色;
}

.progress-infinite .progress-bar3 {
  幅: 100%;
  背景画像: 線形グラデーション(右、#4cd964、#5ac8fa、#007aff、#7DC8E8、#5856d6、#ff2d55);
  アニメーション: colorAnimation 1s 無限;
}

@keyframes カラーアニメーション {
  0% {
    背景画像: 線形グラデーション(右、#4cd964、#5ac8fa、#007aff、#7DC8E8、#5856d6、#ff2d55);
  }
  20% {
    背景画像: 線形グラデーション(右、#5ac8fa、#007aff、#7DC8E8、#5856d6、#ff2d55、#4cd964);
  }
  40% {
    背景画像: 線形グラデーション(右、#007aff、#7DC8E8、#5856d6、#ff2d55、#4cd964、#5ac8fa);
  }
  60% {
    背景画像: 線形グラデーション(右、#7DC8E8、#5856d6、#ff2d55、#4cd964、#5ac8fa、#007aff);
  }
  100% {
    背景画像: 線形グラデーション(右、#5856d6、#ff2d55、#4cd964、#5ac8fa、#007aff、#7DC8E8);
  }
}