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

Question

[alexxxdevelop]

Как это анимировать с помощью html-js-css? Нужно, чтобы индикатор плавно заполнялся по часовой стрелке. Сразу скажу, что свойство clip-path в CSS не работает на айфонах

Answer 1

[Виктор Майоров]

Вторая ссылка из гугла

https://codepen.io/svensz/pen/zYqBMZr?editors=1010
для класса .progress добавляешь transition: background-position 0.2s; для плавности и все, изменение прогресса переделаешь под свои хотелки

Comments

[Kataev]

А как же радиус?)

[alexxxdevelop]

Под свои хотелки не получается изменить даже border-radius

Answer 2

[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>

Comments

[Максим]

stroke-dashoffset это правило сдвинет линию куда угодно

[alexxxdevelop]

Максим, ну покажи, как сдвинуть ее на середину вверху? хоть как меняй значения, но начало линии сдвигается только влево, но не вправо

[Максим]

alexxxdevelop, код покпжи сначала, мне лень с ноля пилить ...скинешь codepen я покажу каа делается это

[alexxxdevelop]

Максим, вон же код выше картинки

[Максим]

alexxxdevelop, https://codepen.io/topicstarter/pen/ExJpxzW - вот так - вокруг крутиш этот штрих, совмещаешь вместе с array

[alexxxdevelop]

Максим, спасибо за помощь) начало удалось выставить в середину, но конец линии теперь прыгает куда хочет. сложность в том, что надо анимировать эту рамку, это как бы секундомер, и он заполняется по часовой стрелке. я использую такой код, который работает исправно, если линия начинается в левом верхнем углу, но если попытаться выставить линию на середину, то получается каша. секундомер 30 сек

https://codepen.io/olbamrdb-the-looper/pen/wvZxvVZ

[Максим]

alexxxdevelop, я потом посмотрю, я понял смысл -

[Максим]

alexxxdevelop, https://codepen.io/topicstarter/pen/gOyjbwE?editor... вот так попробуй

[alexxxdevelop]

Максим, теперь конец упирается в левый верхний угол и не идет до середины

[Максим]

alexxxdevelop, точные координаты покажи где должно быть начало и где должно окончится - это svg тут не бывает по другому ...
и к общему сведению скажу - что такие манипуляции делаются на canvas

[alexxxdevelop]

Максим, начало показано на скрине - середина вверху, конец должен к ней примкнуть слева. для canvas я тоже не нашел способа анимировать заполнение такой рамки, ну только если долго помучиться с lineTo и arc

[Максим]

alexxxdevelop, https://codepen.io/topicstarter/pen/YzMjyMa вот готовое, менять только stroke-dasharray и всё, там я сделал input="range" его изменяй и увидишь как меняется dasharray

[alexxxdevelop]

Максим, вот это круто, спасибо большое! я предполагал использование path, но для меня этот компонент как темный лес