@alexxxdevelop

Как анимировать индикатор в виде прямоугольника со скругленными углами?

661621755231e521349872.jpeg

Как это анимировать с помощью html-js-css? Нужно, чтобы индикатор плавно заполнялся по часовой стрелке. Сразу скажу, что свойство clip-path в CSS не работает на айфонах
  • Вопрос задан
  • 169 просмотров
Пригласить эксперта
Ответы на вопрос 1
@alexxxdevelop Автор вопроса
Нашел способ с помощью svg и изменения свойства stroke-dasharray, но непонятно, как сделать начало линии посередине вверху, а не с левого верхнего угла

<svg id="progress" width="292" height="292" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin meet" style="position: absolute; top: -10px; left: -10px">
            <rect x="5" y="5" width="90" height="90" rx="20" ry="20" stroke-dasharray="100,360" stroke="#00C3FF" stroke-width="4" fill-opacity="0"></rect>
        </svg>


661635610f3d1240192763.jpeg
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы