Home html css Progress Bar Using HTML CSS Progress Bar Using HTML CSS Author - thinhphamvn December 30, 2022 0 Progress Bar Using HTML CSSresultindex.htmlstyle.css>>> Download Source Code (Google Drive) CSS Progress Bar * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #d86981; } .bar { width: 300px; height: 20px; background-color: hotpink; border-radius: 20px; position: relative; overflow: hidden; } .bar::before { width: 150%; height: 100%; background-image: linear-gradient(0deg, red 0%, hotpink 100%); border-radius: inherit; content: ''; position: absolute; transform: scaleX(0); transform-origin: left; animation: process 2s ease-out forwards; } @keyframes process { to { transform: scaleX(1); } } Tags html css Facebook Twitter Whatsapp Newer Older