4 CSS-förloppsindikatorer du kan använda på din webbplats

kropp {
teckensnitt: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
Färg: #404040;
bakgrund: #2a2a2a;
}

.behållare {
marginal: 60px auto;
bredd: 400px;
text-align: center;
}

.behållare.framsteg {
marginal: 0 auto;
bredd: 400px;
}

.framsteg {
stoppning: 4px;
bakgrund: rgba(0, 0, 0, 0.25);
border-radie: 6px;
-webkit-box-skugga: infälld 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
box-skugga: infälld 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.progress-bar {
höjd: 16px;
border-radie: 4px;
bakgrundsbild: -webkit-linjär-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrundsbild: -moz-linjär-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrundsbild: -o-linjär-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrundsbild: linjär-gradient(tillbotten, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05

));
-webkit-övergång: 0.4slinjär;
-moz-övergång: 0.4slinjär;
-o-övergång: 0.4slinjär;
övergång: 0.4slinjär;
-webkit-transition-property: bredd, bakgrundsfärg;
-moz-transition-property: bredd, bakgrundsfärg;
-o-transition-property: bredd, bakgrundsfärg;
transition-property: bredd, bakgrundsfärg;
-webkit-box-skugga: 0 0 1px 1pxrgba(0, 0, 0, 0.25), infälld 0 1pxrgba(255, 255, 255, 0.1);
box-skugga: 0 0 1px 1pxrgba(0, 0, 0, 0.25), infälld 0 1pxrgba(255, 255, 255, 0.1);
}

#fem:kontrollerade ~ .framsteg > .progress-bar {
bredd: 5%;
bakgrundsfärg: #f63a0f;
}

#tjugofem:kontrollerade ~ .framsteg > .progress-bar {
bredd: 25%;
bakgrundsfärg: #f27011;
}

#femtio:kontrollerade ~ .framsteg > .progress-bar {
bredd: 50%;
bakgrundsfärg: #f2b01e;
}

#sjuttiofem:kontrollerade ~ .framsteg > .progress-bar {
bredd: 75%;
bakgrundsfärg: #f2d31b;
}

#ett hundra:kontrollerade ~ .framsteg > .progress-bar {
bredd: 100%;
bakgrundsfärg: #86e01e;
}

.radio {
display: ingen;
}

.märka {
display: inline-block;
marginal: 0 5px 20px;
stoppning: 3px 8px;
Färg: #aaa;
text-skugga: 0 1px svart;
border-radie: 3px;
markör: pekare;
}