Progress Bars CSS

.box {
    background:transparent;
    width:280px;
    padding:15px;
    box-sizing:border-box;
}

.ud {
    margin-top:20px;
}

.ud:nth-of-type(odd) [class^="progress_"] {
    background:{color:Odd Progress Bars};
}

.box .ud:nth-of-type(even) [class^="progress_"] {
    background:{color:Even Progress Bars};
}

.box h6 {
    background:{color:Progress Label Background};
    margin:0;
    width:70px;
    font-size:11px;
    text-align:center;
    box-sizing:border-box;
    padding:5px;
    border-radius:5px;
    vertical-align:middle;
    display:inline-block;
    color:{color:Progress Label Text};
}

.box .acon {
    width:175px;
    display:inline-block;
    position:relative;
    vertical-align:middle;
}

[class^="progress_"] {
    margin-left:5px;
    height:5px;
    border-radius:5px;
    margin-top:-2px;
    z-index:10;
    position:absolute;
}

[class^="bar_"] {
    background:{color:Empty Progress Bar};
    height:2px;
    z-index:5;
    margin-top:-.5px;
    position:absolute;
}

.progress_1 {
    width:{text:First Progress}%;
}

.bar_1 {
    width:calc(100% - {text:First Progress}%);
    margin-left:{text:First Progress}%;
}

.progress_2 {
    width:{text:Second Progress}%;
}

.bar_2 {
    width:calc(100% - {text:Second Progress}%);
    margin-left:{text:Second Progress}%;
}

.progress_3 {
    width:{text:Third Progress}%;
}

.bar_3 {
    width:calc(100% - {text:Third Progress}%);
    margin-left:{text:Third Progress}%;
}

.progress_4 {
    width:{text:Fourth Progress}%;
}

.bar_4 {
    width:calc(100% - {text:Fourth Progress}%);
    margin-left:{text:Fourth Progress}%;
}

.progress_5 {
    width:{text:Fifth Progress}%;
}

.bar_5 {
    width:calc(100% - {text:Fifth Progress}%);
    margin-left:{text:Fifth Progress}%;
}