Створіть індикатор прогресу, як показано на малюнку 1. Ширина самого елемента 100%, висота 20px. Значення індикатора повинно легко задаватися через ширину, як у відсотках, так і в пікселях.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прогрес</title>
<style>
.progress {
background: linear-gradient(to bottom, #333, #999);
border: 1px solid #333;
height: 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.progress::before{
content: '';
position: absolute;
height: 18px; width: 100px;
background: linear-gradient(to bottom, #5bc1fe, #018ef2 50%, #57befd);
border: 1px solid #008DF2;
box-shadow: 3px 0 3px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>