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