4 CSS ленти за напредък, които можете да използвате на вашия уебсайт

тяло {
шрифт: 13px/20px "Лусида Гранде", Tahoma, Verdana, sans-serif;
цвят: #404040;
заден план: #2a2a2a;
}

.контейнер {
поле: 60px автоматично;
ширина: 400px;
подравняване на текста: център;
}

.контейнер.напредък {
марж: 0 автоматично;
ширина: 400px;
}

.напредък {
допълване: 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);
}

.progress-bar {
височина: 16px;
радиус на границата: 4px;
фоново изображение: -webkit-линеен-градиент(Горна част, 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));
фоново изображение: -o-линеен-градиент(Горна част, 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линеен;
-o-преход: 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);
}

#пет:проверено ~ .напредък > .progress-bar {
ширина: 5%;
Цвят на фона: #f63a0f;
}

#двадесет и пет:проверено ~ .напредък > .progress-bar {
ширина: 25%;
Цвят на фона: #f27011;
}

#петдесет:проверено ~ .напредък > .progress-bar {
ширина: 50%;
Цвят на фона: #f2b01e;
}

#седемдесет и пет:проверено ~ .напредък > .progress-bar {
ширина: 75%;
Цвят на фона: #f2d31b;
}

#сто:проверено ~ .напредък > .progress-bar {
ширина: 100%;
Цвят на фона: #86e01e;
}

.радио {
дисплей: няма;
}

.етикет {
дисплей: inline-block;
поле: 0 5px 20px;
допълване: 3px 8px;
цвят: #aaa;
текстова сянка: 0 1px черно;
радиус на границата: 3px;
курсор: показалец;
}