Я искал этот веб-сайт, чтобы найти индикаторы выполнения, но те, которые мне удалось найти, показывают анимированные кружки, которые идут на все 100%.
Я бы хотел остановиться на определенных процентах, как на скриншоте ниже. Есть ли способ сделать это, используя только CSS?
html
css
progress-bar
progress
css-shapes
Адам ГанШай сказал
источник
источник
Ответы:
Я создал руководство о том, как сделать это с помощью CSS3 и библиотеки LESS JavaScript. Вы можете найти блог здесь: https://medium.com/secoya-tech/a917b80c43f9
Вот jsFiddle окончательного результата. Процент устанавливается через
data-progress
атрибут. Изменения анимируются с помощью переходов CSS.источник
outline: 1px solid transparent;
в.mask, .fill, .shadow
группу.Я создал скрипку, используя только CSS .
Также проверьте эту скрипку здесь (только CSS)
Или этот красивый круглый индикатор выполнения с HTML5, CSS3 и JavaScript.
источник
clip
, теперь устарел.Что об этом?
HTML
Javascript
и CSS
http://jsfiddle.net/Aapn8/3410/
Базовый код был взят из Simple PIE Chart http://rendro.github.io/easy-pie-chart/
источник
Еще одно чистое решение на основе css, основанное на двух обрезанных закругленных элементах, которые я вращаю, чтобы получить правильный угол:
http://jsfiddle.net/maayan/byT76/
Это базовый CSS, который позволяет это:
и js поворачивает его по мере необходимости.
довольно легко понять ..
Надеюсь, это поможет, Мааян
источник
-vendor-prefixes
внутри.css()
♪ Только для использованияtransform: 'rotate(' + degree + 'deg)'