Требования: Во время разработки мы столкнемся с использованием различных индикаторов выполнения, поскольку в текущих плагинах существуют различные индикаторы выполнения. Чтобы облегчить индивидуальную разработку и удобную модификацию стилей, мы используем здесь стили HTML и CSS. функция бара .
В этой статье мы поймем, как использовать HTML/CSS для создания различных базовых индикаторов выполнения и необычных индикаторов выполнения и их анимации.
Создайте индикатор выполнения с помощью HTML-тега. Создайте индикатор выполнения с помощью HTML-тега. Внедрите ограничения индикатора выполнения. Используйте CSS-проценты и градиенты для создания обычных индикаторов выполнения и их анимации. индикатор выполнения в форме. Используйте CSS для создания сферического индикатора выполнения.
Самый распространенный индикатор выполнения, с которым мы сталкиваемся, — это горизонтальный индикатор выполнения. Это наиболее распространенный вариант, в основном использующий HTML5 для предоставления двух собственных тегов и реализации индикатора выполнения.
Конкретные примеры счетчиков следующие:
<р> <span>Полнота:</span> <meter min="0" max="500" value="350">350 градусов</meter> </p>
Среди них min, max и value представляют максимальное значение, минимальное значение и текущее значение соответственно.
Давайте посмотрим на использование тегов:
<р> <label for="file">Полнота:</label> <progress max="100" value="70"> 70% </progress> </p>
Среди них атрибут max описывает общий объем работы, которую необходимо выполнить для задачи, представленной элементом прогресса, а атрибут value используется для указания объема работы, выполненной индикатором выполнения.
Различия между ними заключаются в следующем: Итак, вопрос в том, что, судя по приведенной выше демонстрации, эффекты двух ярлыков совершенно одинаковы, так в чем же разница между ними? Почему существуют две, казалось бы, одинаковые этикетки? Самая большая разница между этими двумя элементами — это семантическая разница. Счетчик представляет собой скалярное значение измерения или дробное значение в известном диапазоне. Прогресс представляет собой ход выполнения задачи. Например, следует использовать текущий уровень выполнения требования, если вы хотите отобразить текущее значение скорости на автомобиле. приборной панели, следует использовать счетчик.
Ограничения индикатора и прогресса Конечно, в реальных бизнес-требованиях или производственных средах вы почти никогда не увидите метки индикатора и прогресса. Мы не можем эффективно изменять стили индикаторов и меток прогресса, такие как цвет фона, цвет переднего плана прогресса и т. д. И самое фатальное то, что производительность стилей браузера по умолчанию в разных браузерах неодинакова. Это катастрофический недостаток для бизнеса, который стремится к стабильности и стабильной производительности пользовательского интерфейса! Мы не можем добавить к нему некоторые анимационные и интерактивные эффекты, поскольку в некоторых реальных сценариях приложений это определенно не просто отображение индикатора выполнения и не более того. Используйте CSS для реализации индикатора выполнения.
Поэтому на этом этапе для реализации индикатора выполнения используется больше методов CSS.
(1) Один из наиболее распространенных способов использования процентов для реализации индикатора выполнения — это использование цвета фона в сочетании с процентом для создания индикатора выполнения с градиентом. Самый простой ДЕМО-пример выглядит следующим образом:
<div class="g-container"> <div class="g-progress"></div> </div> <div class="g-progress"></div>
Точно так же мы можем использовать атрибут стиля HTML, чтобы заполнить полное значение фона и передать фактическое процентное значение. Конечно, для передачи значения более рекомендуется использовать пользовательские атрибуты CSS. Чтобы добиться эффекта анимации, мы можем использовать его. CSS @property для преобразования нашего кода:
<div class="g-progress" style="--progress: 70%"></div>
@property --прогресс {
синтаксис: '<процент>';
наследует: ложь;
начальное значение: 0%;
}
.g-прогресс {
маржа: авто;
ширина: 240 пикселей;
высота: 25 пикселей;
радиус границы: 25 пикселей;
фон: линейный градиент (90 градусов, #0f0, #0ff var(--progress), прозрачный 0);
граница: 1 пиксель, сплошная #eee;
переход: .3s --прогресс;
}Суть заключается в использовании фона с угловым градиентом: conic-gradient(): Пример эффекта выглядит следующим образом:
Код выглядит следующим образом:
<div class="прогресс-круг"
v-for="(элемент,индекс) в списке прогресса" :key="index"
:style="{
фон: `radial-gradient(#fff 55%, прозрачность 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0,4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ item.rate }} %
</div>
</div>
<style lang="scss" область действия>
.progress-circle {
положение: относительное;
ширина: 149 пикселей;
высота: 149 пикселей;
семейство шрифтов: PingFang SC;
радиус границы: 50%;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: центр;
}
.прогресс-значение {
позиция: абсолютная;
выравнивание текста: по центру;
высота строки: 50 пикселей;
ширина: 100%;
вес шрифта: 400;
размер шрифта: 26 пикселей;
}
.totalvalbox {
минимальная ширина: 217 пикселей;
выравнивание текста: по центру;
позиция: абсолютная;
внизу: -50rpx;
вес шрифта: 400;
размер шрифта: 30 пикселей;
}
</стиль>Задача оптимизации состоит в следующем:
Проблемы, которые обычно возникают здесь, заключаются в следующем: Ограничения реализации дуговых индикаторов прогресса с угловыми градиентами. Конечно, у этого метода есть два недостатка. Конечно, когда процент прогресса не является числами, такими как 0°, 90°, 180°, 270°, 360°, при использовании угловых градиентов будут очевидные неровные края на соединениях между разными цветами. Возьмем пример конического градиента (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
Решение таких проблем — оставить некоторое пространство для градиента в точке соединения. Давайте просто преобразуем приведенный выше код углового градиента:
{
- фон: конический градиент (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ фон: конический градиент(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}Посмотрите внимательно на приведенный выше код. Изменение с 27% на 27% изменено с 27% на 27,2%. Дополнительные 0,2% предназначены для устранения псевдонимов. Фактический эффект после изменения:
В некоторых случаях мы встречаем индикатор выполнения с закругленными углами в конце индикатора выполнения. Конечно, эту ситуацию также можно решить, если цвет индикатора выполнения является сплошным. Мы можем добиться этого эффекта, наложив два цвета. маленькие кружочки в начале и конце. Если индикатор выполнения имеет градиентный цвет, этот индикатор выполнения необходимо реализовать с помощью SVG/Canvas.
Примеры следующие:
HTML
<div class="g-progress"></div> <div class="g-container"> <div class="g-progress"></div> <div class="g-circle"></div> </div>
CSS
тело, HTML {
ширина: 100%;
высота: 100%;
дисплей: гибкий;
}
.g-контейнер {
положение: относительное;
маржа: авто;
ширина: 200 пикселей;
высота: 200 пикселей;
}
.g-прогресс {
положение: относительное;
маржа: авто;
ширина: 200 пикселей;
высота: 200 пикселей;
радиус границы: 50%;
фон: конический градиент (#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
маска: радиальный градиент (прозрачный, прозрачный 80 пикселей, #000 80,5 пикселей, #000 0);
}
.g-круг {
позиция: абсолютная;
верх: 0;
слева: 0;
&::до,
&::после {
содержание: "";
позиция: абсолютная;
верх: 90 пикселей;
слева: 90 пикселей;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 50%;
фон: #FFCDB2;
z-индекс: 1;
}
&::до {
трансформировать: транслировать (0, -90 пикселей);
}
&::после {
преобразование: поворот (90 градусов) перевод (0, -90 пикселей);
}
}На основе этого расширения вы также можете реализовать многоцветный индикатор выполнения в форме дуги: (Это может выглядеть не как индикатор выполнения, а больше похоже на круговую диаграмму )
.g-прогресс {
ширина: 160 пикселей;
высота: 160 пикселей;
радиус границы: 50%;
маска: радиальный градиент (прозрачный, прозрачный 50%, #000 51%, #000 0);
фон:
конический градиент(
#FFCDB2 0, #FFCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50%, #673ab7 90%,
#ff5722 90,2%, #ff5722 100%
);
}Сферические индикаторы выполнения также относительно распространены, например:
Основной код выглядит следующим образом: просто контролируйте высоту волны, когда сферический контейнер показывает прогресс от 0% до 100%. Мы можем получить эффект анимации от 0% до 100%.
<div class="контейнер">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
.контейнер {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 5 пикселей сплошной RGB (118, 218, 255);
радиус границы: 50%;
переполнение: скрыто;
}
.wave-change {
позиция: абсолютная;
ширина: 200 пикселей;
высота: 200 пикселей;
слева: 0;
верх: 0;
анимация: изменение 12 с, бесконечная линейная;
&::до,
&::после{
содержание: "";
позиция: абсолютная;
ширина: 400 пикселей;
высота: 400 пикселей;
верх: 0;
осталось: 50%;
цвет фона: rgba(255, 255, 255, .6);
граница-радиус: 45% 47% 43% 46%;
трансформировать: транслировать (-50%, -70%) вращать (0);
анимация: вращение 7 секунд, линейная бесконечность;
z-индекс: 1;
}
&::после {
граница-радиус: 47% 42% 46% 44%;
цвет фона: rgba(255, 255, 255, .8);
трансформировать: транслировать (-50%, -70%) вращать (0);
анимация: вращение 9 секунд линейное - 4 секунды бесконечно;
z-индекс: 2;
}
}
.волна {
положение: относительное;
ширина: 200 пикселей;
высота: 200 пикселей;
цвет фона: RGB(118, 218, 255);
радиус границы: 50%;
}
п {
позиция: абсолютная;
верх: 50%;
осталось: 50%;
трансформировать: транслировать(-50%, -50%);
размер шрифта: 36 пикселей;
цвет: #000;
z-индекс: 10;
}
@keyframes вращать {
к {
трансформировать: транслировать (-50%, -70%) вращать (360 градусов);
}
}
@keyframes изменить {
от {
верх: 80 пикселей;
}
к {
верх: -120 пикселей;
}
}Конечно, CSS постоянно меняется, и типы индикаторов выполнения определенно не ограничиваются вышеуказанными категориями. Например, мы можем использовать фильтры для имитации анимации зарядки мобильных телефонов Huawei, что также является способом представления индикатора выполнения и также может быть реализовано с использованием чистого CSS:
Основной код выглядит следующим образом
<div class="g-container">
<div class="g-number">98,7%</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
</ul>
</div>
</div>
html,
тело {
ширина: 100%;
высота: 100%;
дисплей: гибкий;
фон: #000;
переполнение: скрыто;
}
.g-номер {
позиция: абсолютная;
ширина: 300 пикселей;
верхние: 27%;
выравнивание текста: по центру;
размер шрифта: 32px;
z-индекс: 10;
цвет: #fff;
}
.g-контейнер {
положение: относительное;
ширина: 300 пикселей;
высота: 400 пикселей;
маржа: авто;
}
.g-контраст {
фильтр: контрастность (10) оттенок-поворот (0);
ширина: 300 пикселей;
высота: 400 пикселей;
цвет фона: #000;
переполнение: скрыто;
анимация: hueRotate 10 с, бесконечная линейная;
}
.g-круг {
положение: относительное;
ширина: 300 пикселей;
высота: 300 пикселей;
размер коробки: граница-коробка;
фильтр: размытие (8 пикселей);
&::после {
содержание: "";
позиция: абсолютная;
верх: 40%;
осталось: 50%;
трансформировать: транслировать (-50%, -50%) вращать (0);
ширина: 200 пикселей;
высота: 200 пикселей;
цвет фона: #00ff6f;
граница-радиус: 42% 38% 62% 49% / 45%;
анимация: вращать 10 секунд, бесконечная линейная;
}
&::до {
содержание: "";
позиция: абсолютная;
ширина: 176 пикселей;
высота: 176 пикселей;
верх: 40%;
осталось: 50%;
трансформировать: транслировать(-50%, -50%);
радиус границы: 50%;
цвет фона: #000;
z-индекс: 10;
}
}
.g-пузыри {
позиция: абсолютная;
осталось: 50%;
внизу: 0;
ширина: 100 пикселей;
высота: 40 пикселей;
трансформировать: транслировать (-50%, 0);
радиус границы: 100 пикселей 100 пикселей 0 0;
цвет фона: #00ff6f;
фильтр: размытие (5 пикселей);
}
ли {
позиция: абсолютная;
радиус границы: 50%;
фон: #00ff6f;
}
@for $i от 0 до 15 {
li:nth-child(#{$i}) {
$width: 15 + случайный(15) + пикселей;
слева: 15 + случайное(70) + пикселей;
верх: 50%;
трансформировать: транслировать(-50%, -50%);
ширина: $ширина;
высота: $ширина;
анимация: moveToTop #{random(6) + 3}s easy-in-out -#{random(5000)/1000}s бесконечно;
}
}
@keyframes вращать {
50% {
граница-радиус: 45% / 42% 38% 58% 49%;
}
100% {
преобразование: трансляция (-50%, -50%) поворот (720 градусов);
}
}
@keyframes moveToTop {
90% {
непрозрачность: 1;
}
100% {
непрозрачность: .1;
трансформировать: транслировать (-50%, -180 пикселей);
}
}
@keyframes hueRotate {
100% {
фильтр: контрастность (15), оттенок-поворот (360 градусов);
}
}Напоследок рекомендую несколько хороших, качественных и крутых индикаторов прогресса.
Полную реализацию вышеперечисленных эффектов можно щелкнуть мышью — умело используйте CSS для создания крутой анимации зарядки.
На этом завершается статья о том, как реализовать различные функции индикатора выполнения с помощью HTML/CSS. Вот и все, что касается ознакомления со статьей. Чтобы узнать больше о содержании индикатора выполнения html css, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы поддержите downcodes.com в будущем!