Здравствуйте! Помогите пожалуйста, не понимаю как сделать круглый прогресс бар как на фото:
Код HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/hud.css">
</head>
<body>
<div class="hud">
<div class="section">
<div class="level">
<h1>8</h1>
<p class="exp">14/16</p>
</div>
<div class="progress">
<progress id="progress" class="styled" max="100" value="76"></progress>
<progress id="progress2" class="styled1" max="100" value="11"></progress>
<h1 class="money">1 000 000</h1>
</div>
</div>
</div>
<script src="js/hud.js"></script>
</body>
</html>
Код CSS:
@import url('fonts.css');
body {
font-family: 'CenturyGothic-B', sans-serif;
}
.hud {
float: right;
margin-top: 45px;
width: 529px;
height: 250px;
background-image: url("../image/bg1.png");
}
.section {
color: #fff;
text-align: center;
}
.level {
float: left;
padding-top: 55px;
padding-left: 93px;
}
.level h1 {
overflow: hidden;
font-size: 40px;
}
.exp {
padding-top: 35px;
}
.progress {
padding-right: 65px;
float: right;
padding-top: 64px;
}
progress.styled {
display: block;
border-radius: 1px;
width: 180px;
height: 8px;
}
progress.styled::-webkit-progress-bar {
background-color: #9e1c20;
}
progress.styled::-webkit-progress-value {
background-color: #ea2027;
background-image: linear-gradient(#ea2027);
}
progress.styled::-moz-progress-bar {
background-color: #ea2027;
background-image: linear-gradient(#ea2027);
}
progress.styled1 {
display: block;
border-radius: 1px;
width: 180px;
height: 8px;
margin-top: 30px;
}
progress.styled1::-webkit-progress-bar {
background-color: #576574;
}
progress.styled1::-webkit-progress-value {
background-color: #8395a7;
background-image: linear-gradient(#8395a7);
}
progress.styled1::-moz-progress-bar {
background-color: #8395a7;
background-image: linear-gradient(#8395a7);
}
.money {
float: right;
padding-top: 25px;
padding-right: 35px;
}
Средний
