HTML標準の<progress>要素をスタイリングした進捗バー。意味付けはブラウザ任せで、装飾だけをCSSで整えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
divで自作せず<progress>を使うと、value/maxの意味が支援技術へそのまま伝わります。装飾はブラウザ2系統の疑似要素に同じ見た目を書きます: Chrome/Safariは ::-webkit-progress-bar（トラック）と ::-webkit-progress-value（値）、Firefoxは ::-moz-progress-bar（値）とprogress自体のbackground（トラック）です。この2系統はセレクタをまとめて書けないため、別々のルールにします。
色を変えるだけならaccent-color: #b0413e;の1行でも足ります（グラデーションは不可）。valueなしの<progress>は不確定（インジケータ）表示になります。
HTML標準の<progress>要素をスタイリングしてください。appearance: noneでリセットし、::-webkit-progress-bar / ::-webkit-progress-value / ::-moz-progress-barの両系統にグラデーションの進捗バーを実装してください。