4 индикатора выполнения CSS, которые вы можете использовать на своем веб-сайте

тело {
шрифт: 13px/20px "Люсида Гранде", Tahoma, Verdana, без засечек;
цвет: #404040;
фон: #2а2а2а;
}

.контейнер {
поле: 60px авто;
ширина: 400 пикселей;
выравнивание текста: по центру;
}

.контейнер.прогресс {
поле: 0 авто;
ширина: 400 пикселей;
}

.прогресс {
отступ: 4px;
фон: RGBA(0, 0, 0, 0.25);
радиус границы: 6px;
-webkit-box-тень: вставка 0 1пикс. 2пикс.RGBA(0, 0, 0, 0.25), 0 1пикс.RGBA(255, 255, 255, 0.08);
коробка-тень: вставка 0 1пикс. 2пикс.RGBA(0, 0, 0, 0.25), 0 1пикс.RGBA(255, 255, 255, 0.08);
}

.индикатор {
высота: 16 пикселей;
радиус границы: 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.4слинейный;
-moz-переход: 0.4слинейный;
-о-переход: 0.4слинейный;
переход: 0.4слинейный;
-webkit-transition-property: ширина, цвет фона;
-moz-transition-свойство: ширина, цвет фона;
-o-transition-свойство: ширина, цвет фона;
свойство перехода: ширина, цвет фона;
-webkit-box-тень: 0 0 1пикс. 1пикс.RGBA(0, 0, 0, 0.25), вставка 0 1пикс.RGBA(255, 255, 255, 0.1);
коробка-тень: 0 0 1пикс. 1пикс.RGBA(0, 0, 0, 0.25), вставка 0 1пикс.RGBA(255, 255, 255, 0.1);
}

#5: проверено ~ .прогресс &гт; .индикатор {
ширина: 5%;
фоновый цвет: #f63a0f;
}

#двадцать пять: проверено ~ .прогресс &гт; .индикатор {
ширина: 25%;
фоновый цвет: #f27011;
}

#50: проверено ~ .прогресс &гт; .индикатор {
ширина: 50%;
фоновый цвет: #f2b01e;
}

#семьдесят пять: проверено ~ .прогресс &гт; .индикатор {
ширина: 75%;
фоновый цвет: #f2d31b;
}

#одна сотня: проверено ~ .прогресс &гт; .индикатор {
ширина: 100%;
фоновый цвет: #86e01e;
}

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

.метка {
отображение: встроенный блок;
поля: 0 5px 20px;
отступ: 3px 8px;
цвет: #ааа;
text-shadow: 0 1px черный;
радиус границы: 3px;
курсор: указатель;
}