4 CSS folyamatjelző, amelyet a webhelyén használhat

body {
betűtípus: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
szín: #404040;
háttér: #2a2a2a;
}

.tartály {
margó: 60px auto;
szélesség: 400 képpont;
szöveg igazítása: középre;
}

.tartály.előrehalad {
margó: 0 auto;
szélesség: 400 képpont;
}

.előrehalad {
padding: 4px;
háttér: rgba(0, 0, 0, 0.25);
határsugár: 6 képpont;
-webkit-box-shadow: betét 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
doboz-árnyék: betét 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.fejlődésmutató {
magasság: 16 képpont;
határsugár: 4 képpont;
háttérkép: -webkit-lineáris-gradiens(tetejére, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
háttérkép: -moz-lineáris-gradiens(tetejére, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
háttérkép: -o-lineáris-gradiens(tetejére, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
háttérkép: lineáris-gradiens(nak nekalsó,

rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-átmenet: 0.4slineáris;
-moz-átmenet: 0.4slineáris;
-o-átmenet: 0.4slineáris;
átmenet: 0.4slineáris;
-webkit-transition-property: szélesség, háttérszín;
-moz-transition-property: szélesség, háttérszín;
-o-transition-property: szélesség, háttérszín;
átmeneti tulajdonság: szélesség, háttérszín;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), betét 0 1pxrgba(255, 255, 255, 0.1);
doboz-árnyék: 0 0 1px 1pxrgba(0, 0, 0, 0.25), betét 0 1pxrgba(255, 255, 255, 0.1);
}

#öt:ellenőrizve ~ .előrehalad > .fejlődésmutató {
szélesség: 5%;
háttérszín: #f63a0f;
}

#huszonöt:ellenőrizve ~ .előrehalad > .fejlődésmutató {
szélesség: 25%;
háttérszín: #f27011;
}

#ötven:ellenőrizve ~ .előrehalad > .fejlődésmutató {
szélesség: 50%;
háttérszín: #f2b01e;
}

#hetvenöt:ellenőrizve ~ .előrehalad > .fejlődésmutató {
szélesség: 75%;
háttérszín: #f2d31b;
}

#száz:ellenőrizve ~ .előrehalad > .fejlődésmutató {
szélesség: 100%;
háttérszín: #86e01e;
}

.rádió {
kijelző: nincs;
}

.címke {
kijelző: inline-block;
margó: 0 5 képpont 20 képpont;
padding: 3px 8px;
szín: #aaa;
szöveg-árnyék: 0 1px fekete;
határsugár: 3 képpont;
kurzor: pointer;
}