Создайте круговую шкалу прогресса, чтобы она выглядела одинаково в браузерах Chrome и Safari, как показано на рис. 1.
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>progress</title>
<style>
.progress-bar {
--s: 200px;
--w: 20px;
--a: calc(((var(--p) * 360) / 100) * 1deg);
width: var(--s); height: var(--s);
border-radius: 50%;
background: conic-gradient(#f59421, #f59421 var(--a), #ede9e0 var(--a), #ede9e0);
}
.progress-value {
width: calc(var(--s) - 2 * var(--w));
height: calc(var(--s) - 2 * var(--w));
background: #fff;
color: #2e3f53;
border-radius: 50%;
font-size: 2rem;
}
.progress-bar, .progress-value {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valumax="100" style="--p:30">
<div class="progress-value">30%</div>
</div>
</body>
</html>