4 bare de progres CSS pe care le poți folosi pe site-ul tău web

corp {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
culoare: #404040;
fundal: #2a2a2a;
}

.container {
marja: 60px automat;
latime: 400px;
text-align: centru;
}

.container.progres {
marja: 0 auto;
latime: 400px;
}

.progres {
umplutură: 4px;
fundal: rgba(0, 0, 0, 0.25);
chenar-rază: 6px;
-webkit-box-shadow: medalion 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
cutie-umbră: medalion 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.bara de progres {
înălțime: 16px;
chenar-rază: 4px;
imagine de fundal: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagine de fundal: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagine de fundal: -o-liniar-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagine de fundal: liniar-gradient(lapartea de jos, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit-tranziție: 0.4sliniar;
-moz-tranziție: 0.4sliniar;
-o-tranziție: 0.4sliniar;
tranziție: 0.4sliniar;
-webkit-transition-property: latime, culoare-fond;
-moz-transition-property: lățime, culoare de fundal;
-o-transition-property: lățime, culoare de fundal;
proprietate-tranziție: lățime, culoare de fundal;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), medalion 0 1pxrgba(255, 255, 255, 0.1);
cutie-umbră: 0 0 1px 1pxrgba(0, 0, 0, 0.25), medalion 0 1pxrgba(255, 255, 255, 0.1);
}

#cinci:verificat ~ .progres > .bara de progres {
latime: 5%;
culoare de fundal: #f63a0f;
}

#douazeci si cinci:verificat ~ .progres > .bara de progres {
latime: 25%;
culoare de fundal: #f27011;
}

#cincizeci:verificat ~ .progres > .bara de progres {
latime: 50%;
culoare de fundal: #f2b01e;
}

#saptezeci si cinci:verificat ~ .progres > .bara de progres {
latime: 75%;
culoare de fundal: #f2d31b;
}

#o sută:verificat ~ .progres > .bara de progres {
latime: 100%;
culoare de fundal: #86e01e;
}

.radio {
afișaj: niciunul;
}

.eticheta {
display: inline-block;
marjă: 0 5px 20px;
umplutură: 3px 8px;
culoare: #aaa;
text-shadow: 0 1px negru;
chenar-rază: 3px;
cursor: pointer;
}