Thu, 2021-07-01 09:37
I am trying to implement a step progress bar.
The line separating the circled steps has a grey background. This background is not working on the 'active' step however. In the example below, the orange line only extends to 60%. I want the rest of the line to be grey like the other ones.
body { font-family: "Poppins", sans-serif; margin: 0; padding: 0; } .progressbar { width: 100%; margin: 0; padding: 0; position: relative; z-index: 100; } .progressbar li { list-style-type: none; width: 30%; float: left; font-size: 1rem; position: relative; text-align: center; color: #000; } .progressbar li:after { width: 100%; height: 6px; content: ""; position: absolute; background-color: #C8C8C8; top: 30px; left: -50%; z-index: -1; } .progressbar li:first-child:after { content: none; } .progressbar li.active+li:after { background-color: #F5A000; width: 60%; } .progressbar li:before { width: 72px; height: 72px; display: block; text-align: center; margin: auto; border-radius: 50%; background-color: #FFF; color: #000; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; } .progressbar li.active:before { background-color: #F5A000; } /* Step Count */ ul.rb-step { counter-reset: step; } ul.rb-step li:before { content: counter(step); counter-increment: step; } <html> <head> <meta chartset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://kit.fontawesome.com/0f876a0d49.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css" /> </head> <body> <div class="container mt-5 pt-5"> <ul class="progressbar rb-step d-flex justify-content-center"> <li class="active">login</li> <li>Add Mobile</li> <li>Add Email</li> <li>All Done</li> </ul> </div> </body> </html>
with this code I only get the 60% yellow part. The 40% rest needs to be gray.
Any help would be appreciated.