Всем привет! В этом материале я покажу, как создать прогресс бар на чистом CSS3 .
Всем привет! В этом материале я покажу, как создать прогресс бар на чистом CSS3.
Начнем, как вы уже догадались, с разметки
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Progress Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 30%"></span>
</div>
</div>
</body>
</html>
Теперь перейдем к CSS. Стили будут довольно простыми
.wrapper {
width: 500px;
}
.progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
display: block;
height: 22px;
background-color: #659cef;
border-radius: 3px;
transition: width 500ms ease-in-out;
}
Вот и все! Вот так, казалось бы, просто мы можем сделать довольно интересный прогресс бар на чистом CSS3. Теперь вы можете использовать его в своих скриптах.
А у меня на этом все! Спасибо за внимание!
Демонстрация: http://jsfiddle.net/806t3zrh/3/
