Создайте несколько шкал с помощью элемента <meter>, как показано на рис. 1, с диапазоном значений от 0 до 100. Справа от шкалы должно выводиться текущее значение атрибута value со знаком процентов. Вид в браузере Firefox может отличаться.
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>meter</title>
<style>
body {
background-color: #f5f6fa; /* Цвет фона веб-страницы */
}
:root {
--h: 2rem;
--r: 0.5rem;
--color-bar: #f9c13a;
}
meter {
width: 100%; /* Ширина */
height: var(--h); /* Высота */
background: #efefef; /* Цвет фона */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Параметры тени */
border-radius: var(--r); /* Радиус скругления */
margin-bottom: 1rem; /* Расстояние снизу */
display: flex; /* Используем флексы */
align-items: center; /* Выравнивание по центру */
}
meter::after {
content: attr(value) '%'; /* Выводим значение атрибута value */
margin: 0 10px; /* Расстояние от шкалы до текста */
width: 2rem; /* Ширина */
}
/* Firefox */
meter::-moz-meter-bar {
background: var(--color-bar); /* Цвет шкалы */
border-radius: var(--r); /* Радиус скругления */
}
/* Blink, Webkit */
meter::-webkit-meter-bar {
height: var(--h); /* Высота */
background: #efefef; /* Цвет фона */
border: 0; /* Убираем рамку */
border-radius: var(--r); /* Радиус скругления */
}
meter::-webkit-meter-optimum-value {
background: var(--color-bar); /* Цвет шкалы */
border-radius: var(--r); /* Радиус скругления */
}
</style>
</head>
<body>
<meter min="0" max="100" value="20"></meter>
<meter min="0" max="100" value="60"></meter>
<meter min="0" max="100" value="80"></meter>
<meter min="0" max="100" value="100"></meter>
</body>
</html>