4 Γραμμές προόδου CSS που μπορείτε να χρησιμοποιήσετε στον ιστότοπό σας

σώμα {
γραμματοσειρά: 13px/20px "Λουσίντα Γκράντε", Tahoma, Verdana, sans-serif;
χρώμα: #404040;
Ιστορικό: #2a2a2a;
}

.δοχείο {
περιθώριο: 60 px auto;
πλάτος: 400 px;
text-align: κέντρο;
}

.δοχείο.πρόοδος {
περιθώριο: 0 αυτόματο;
πλάτος: 400 px;
}

.πρόοδος {
padding: 4px;
Ιστορικό: rgba(0, 0, 0, 0.25);
περίγραμμα-ακτίνα: 6px;
-webkit-box-shadow: ένθεση 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
κουτί-σκιά: ένθεση 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.γραμμή προόδου {
ύψος: 16 px;
περίγραμμα-ακτίνα: 4px;
εικόνα φόντου: -webkit-linear-gradient(μπλουζα, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
εικόνα φόντου: -moz-γραμμική-κλίση(μπλουζα, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
εικόνα φόντου: -ο-γραμμική-κλίση(μπλουζα, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
εικόνα φόντου: γραμμική κλίση(προς τηνκάτω μέρος, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-webkit-μετάβαση: 0.4sγραμμικός;
-moz-μετάβαση: 0.4sγραμμικός;
-ο-μετάβαση: 0.4sγραμμικός;
μετάβαση: 0.4sγραμμικός;
-webkit-transition-property: πλάτος, χρώμα φόντου.
-moz-transition-property: πλάτος, χρώμα φόντου.
-o-transition-property: πλάτος, χρώμα φόντου.
μετάβαση-ιδιότητα: πλάτος, χρώμα φόντου.
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), ένθεση 0 1pxrgba(255, 255, 255, 0.1);
κουτί-σκιά: 0 0 1px 1pxrgba(0, 0, 0, 0.25), ένθεση 0 1pxrgba(255, 255, 255, 0.1);
}

#πέντε:τετραγωνισμένος ~ .πρόοδος > .γραμμή προόδου {
πλάτος: 5%;
χρώμα του φόντου: #f63a0f;
}

#είκοσι πέντε:τετραγωνισμένος ~ .πρόοδος > .γραμμή προόδου {
πλάτος: 25%;
χρώμα του φόντου: #f27011;
}

#πενήντα:τετραγωνισμένος ~ .πρόοδος > .γραμμή προόδου {
πλάτος: 50%;
χρώμα του φόντου: #f2b01e;
}

#εβδομήντα πέντε:τετραγωνισμένος ~ .πρόοδος > .γραμμή προόδου {
πλάτος: 75%;
χρώμα του φόντου: #f2d31b;
}

#εκατό:τετραγωνισμένος ~ .πρόοδος > .γραμμή προόδου {
πλάτος: 100%;
χρώμα του φόντου: #86e01e;
}

.ραδιόφωνο {
οθόνη: καμία;
}

.επιγραφή {
οθόνη: inline-block;
περιθώριο: 0 5px 20px;
padding: 3px 8px;
χρώμα: #ααα;
κείμενο-σκιά: 0 1px μαύρο;
περίγραμμα-ακτίνα: 3px;
δρομέας: δείκτης;
}