Css static progress bar, css static
Image preview:
Css code:
<Style>. statusList {width: 240px; float: left; line-height: 68px; margin: 0 2px; text-align: center; font-family: ""; font-size: 14px;}/* color */. scheduleGray {background-color: # e5e5e5; height: 9px;}/* purple */. scheduleGreen {background-color: #6dc942; width: 50%; height: 9px; float: left;}/* green */. scheduleBlue {background-color: #6767c6; width: 80%; height: 9px; float: left;}/* Blue */</style>
Html code:
<Div class = "statusList"> <div class = "scheduleGray" style = "position: relative; margin-top: 22px; z-index:-1; "> <div style =" float: left; position: absolute; left: 0; top: 0; z-index: 10; z-index: 9999; "> </div> <! -- You can set the class to change the progress bar color and width to set the progress bar --> <div class = "scheduleGreen" style = "position: relative; z-index: 0; width: 20% "> <div style =" position: absolute; top: 11px; left: 120px; height: 14px; line-height: 14px; color: #6dc942; "> 20% </div> <! -- Template --> <div style = "float: right; position: absolute; right: 0; top: 0; "> </div>