<ProgressBar percent={75} /> 

<ProgressBar filledBackground="linear-gradient(to right, #fefb72, #f0bb31)" percent={75} /> 

<ProgressBar percent={75}> <Step> {({ accomplished, index }) => ( <div className={`indexedStep ${accomplished ? "accomplished" : null}`} > {index + 1} </div> )} </Step> <Step> {({ accomplished, index }) => ( <div className={`indexedStep ${accomplished ? "accomplished" : null}`} > {index + 1} </div> )} </Step> <Step> {({ accomplished, index }) => ( <div className={`indexedStep ${accomplished ? "accomplished" : null}`} > {index + 1} </div> )} </Step> </ProgressBar> 

.indexedStep { color: white; width: 20px; height: 20px; font-size: 12px; background-color: rgba(211, 211, 211, 0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .indexedStep.accomplished { background-color: rgba(0, 116, 217, 1); } 

<ProgressBar filledBackground="linear-gradient(to right, #fefb72, #f0bb31)" percent={75} > <Step transition="scale"> {({ accomplished, index }) => ( <div className={`transitionStep ${accomplished ? "accomplished" : null}`} > 🌑 </div> )} </Step> <Step transition="scale"> {({ accomplished, index }) => ( <div className={`transitionStep ${accomplished ? "accomplished" : null}`} > 🌒 </div> )} </Step> <Step transition="scale"> {({ accomplished, index }) => ( <div className={`transitionStep ${accomplished ? "accomplished" : null}`} > 🌓 </div> )} </Step> <Step transition="scale"> {({ accomplished, index }) => ( <div className={`transitionStep ${accomplished ? "accomplished" : null}`} > 🌔 </div> )} </Step> <Step transition="scale"> {({ accomplished, index }) => ( <div className={`transitionStep ${accomplished ? "accomplished" : null}`} > 🌕 </div> )} </Step> </ProgressBar> 

.transitionStep { filter: grayscale(1); } .transitionStep.accomplished { filter: grayscale(0); }