body{display: flex; justify-content: center; align-items: center; height: 100vh;} progress{ width: 1200px; accent-color: white; background: white; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} progress[value] {-webkit-appearance: none; appearance: none;} progress::-moz-progress{ width: 1200px; accent-color: white; background: white; height: 30px;} progress::-moz-progress-bar {border-radius: 100px; background: #f9f0f2; background: linear-gradient(to right, rgb(255,255,255), rgba(249, 102, 129, 0.1));} progress::-webkit-progress-bar {background: #f9f0f2;border-radius: 100px; position: relative;} progress::-webkit-progress-bar::after{position: absolute; content: ""; } progress::-webkit-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1)); position: relative;} progress::-webkit-progress-value::after{position: absolute; content: ""; font-size: 1000px;} progress::-moz-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1));} .barText { width: 279px; margin: 50px auto; border-radius: 60px; background: #f9f0f2; color: #000; padding: 20px; text-align: center; font-weight: 900; font-family: arial; position: relative; top: -200px; left: 350px;} .barText:before {content: ""; width: 0px; height: 0px; position: absolute; border-left: 20px solid #f9f0f2; border-right: 20px solid transparent; border-top: 40px solid #f9f0f2; border-bottom: 40px solid transparent; left: 10px; top: 30px; transform: rotate(22deg);}

 <progress value="50" max="100" class="progressBar"></progress> <div class="barText"></div>