#html #css
#HTML #css
Вопрос:
Посмотрев на новый / дизайн от Google, мне стало интересно, есть ли какой-либо способ выполнить загрузочный счетчик, подобный тому, который находится в разделе / progress-activity (прокрутите вниз до «Circular») с помощью HTML / CSS?
Я говорю только о самой анимации. Насколько я знаю, может быть практически невозможно округлить границы счетчика, как это сделал Google.
Мне удалось создать только очень (very) простую версию этого счетчика, но я не мог понять, как анимировать саму «границу» (например, счетчик в новейшей версии Android). По сути, я просто использовал border / border-radius: 50%; и бесконечную анимацию CSS для поворота HTML-элемента (0 градусов -> 360 градусов):http://codepen.io/anon/pen/mqiCf
Или я должен использовать «олдскульный» .gif, чтобы получить что-то похожее на счетчик «Android L»?
Комментарии:
1. Все возможно, но это будет очень сложно. Я вижу, вы довольно близки — почему бы вам не добавить белый круг поверх синего, чтобы контролировать размер синего (хотя это будет работать только на белом фоне)? Вы знаете, белый будет работать как ластик.
Ответ №1:
Я думаю, что этого можно было бы достичь с помощью SVG, при условии, что те браузеры, на которые вы ориентируетесь, поддерживают требуемую анимацию.
Я бы использовал два компонента: частично непрозрачный эффект «растущего круга» в начале — это один элемент, а вращающийся круговой контур — это второй элемент.
Аспект, которого невозможно достичь с помощью HTML, заключается в изменении длины дуги окружности. В SVG вы можете добиться этого, используя анимированный массив штрихов. Вот пример этого.
Комментарии:
1. Спасибо, хорошая идея, возможно, лучше, чем просто использовать HTML / CSS. Я думаю, что поддержка браузером SVG даже лучше, чем мой подход к CSS-анимации. Однако я еще не работал с SVG, поэтому сначала мне нужно будет ознакомиться с ним.
2. Вы можете столкнуться с крутой кривой обучения, если вы впервые используете SVG. Однако вот основной круг, с которого вы сможете начать:
<svg><circle cx="15" cy="15" r="13" fill="none" stroke="black" /></svg>3. Я знаю, что об этом спрашивали некоторое время назад, но вот версия счетчика в формате HTML, SVG и CSS. Я постарался сделать его как можно ближе. codepen.io/nrdobie/pen/jqswe
4. @Nick отличная работа! Я не думал об этом в то время, но запуск эффекта «распутывания» для завершения работы счетчика — еще одна проблема. Для этого может потребоваться API веб-анимации.
Ответ №2:
В данный момент у меня нет времени приводить лучший пример, но этот немного ближе. Я попробовал то, что сказал Шомз в комментарии, об использовании белого загрузчика поверх синего. Это не идеально, но немного поиграйте со временем.
Комментарии:
1. Спасибо, я немного модифицировал ваше перо и работал с двумя полукругами, перекрывающими друг друга. Это похоже, но, к сожалению, наложение на самом деле не «сотрет» цвет: codepen.io/anon/pen/cwzvK
2. У вас есть время, если вы сможете сделать так, чтобы белый полукруг был немного шире синего, это позаботится о краях.