N способов реализовать различные индикаторы выполнения, используя только HTML/CSS

внешний интерфейс JavaScript CSS
N способов реализовать различные индикаторы выполнения, используя только HTML/CSS

В этой статье рассказывается, как использовать HTML/CSS для создания различных базовых индикаторов выполнения и причудливых индикаторов выполнения и их анимации.Из этой статьи вы сможете узнать:

  • через HTML-теги<meter>Создайте индикатор выполнения
  • через HTML-теги<progress>Создайте индикатор выполнения
  • Ограничения HTML-реализации Progress Bar
  • Создайте обычный индикатор выполнения и его анимацию, используя проценты CSS, градиенты
  • Создайте круговой индикатор выполнения с помощью CSS
  • Создайте сферический индикатор выполнения с помощью CSS
  • Создайте трехмерный индикатор выполнения с помощью CSS

Индикатор выполнения является одним из наиболее часто используемых в нашем повседневном интерфейсе.Давайте посмотрим. На сегодняшний день, как мы можем реализовать индикатор выполнения.

Теги HTML -- счетчик и прогресс

Некоторым учащимся это может быть неясно, HTML5 изначально предоставляет два тега.<meter>а также<progress>реализовать индикатор выполнения.

  • <meter>: используется для отображения скалярного или дробного значения известного диапазона
  • <progress>: используется для отображения хода выполнения задачи, обычно этот элемент отображается в виде индикатора выполнения

Давайте рассмотрим отдельно, прежде всего<meter>Этикетка:

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350">350 degrees</meter>
</p>

meter {
    width: 200px;
}

Стиль следующий:

в,min,max,valueПредставляют максимальное значение, минимальное значение и текущее значение соответственно.

Кстати, давайте посмотрим<progress>Использование тегов:

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70"> 70% </progress>
</p>

progress {
    width: 200px;
}

Стиль следующий:

в,maxАтрибут описывает, насколько работа должна выполняться задача, представленная этим элементом прогресса.valueСвойство используется для указания объема работы, выполненной индикатором выполнения.

Разница между счетчиком и прогрессом

Итак, вопрос в том, что из приведенной выше демонстрации эффект двух меток абсолютно одинаков, так в чем же между ними разница? Почему две, казалось бы, одинаковые этикетки?

Самая большая разница между этими двумя элементами заключается в том, чтосемантическая разница.

  • <meter>:ВыражатьСкалярное измерение или дробное значение в известном диапазоне
  • <progress>:Выражатьход выполнения задачи

Например, текущая степень выполнения требования должна использовать<progress>, а если вы хотите отобразить текущее значение скорости приборной панели автомобиля, вы должны использоватьmeter.

Ограничения счетчика и прогресса

Конечно, в реальных бизнес-требованиях или производственной среде вы почти никогда не увидите<meter>а также<progress>Этикетка.

и мы в этой статье --«Использование списка данных для реализации фильтруемого раскрывающегося списка»Упомянутые причины аналогичны:

  1. Мы не можем эффективно модифицировать<meter>а также<progress>Стиль метки, такой как цвет фона, цвет переднего плана прогресса и т. д. И, что самое печальное, производительность стилей браузера по умолчанию неодинакова в разных браузерах. Это катастрофический недостаток для компаний, которые стремятся к стабильности и стабильной производительности пользовательского интерфейса!
  2. Мы не можем добавить к нему некоторые анимационные эффекты и интерактивные эффекты, потому что в некоторых реальных сценариях приложений он определенно не просто показывает индикатор выполнения и все.

Индикатор выполнения с CSS

Поэтому на данном этапе для реализации индикатора выполнения используется больше CSS.

Реализация индикатора выполнения с использованием процентов

Наиболее распространенный способ — использовать цвет фона, чтобы он соответствовал проценту, чтобы сделать индикатор выполнения.

Самая простая демонстрация:

<div class="g-container">
    <div class="g-progress"></div>
</div>

.g-container {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: #eee;
}
.g-progress {
    width: 50%;
    height: inherit;
    border-radius: 25px 0 0 25px;
    background: #0f0;
}

Эффект следующий:

Преимущество этого метода в том, что его легко использовать, а фактический прогресс можно легко передать в CSS.

  1. Использовать HTMLstyleСвойства заполненыwidthзначение, например<div class="g-progress" style="width: 50%"></div>
  2. Или используйте пользовательские свойства CSS<div class="g-progress" style="--progress: 50%"></div>с реальным CSSwidth: var(--progress)
  3. Полностью настраиваемый стиль и простое добавление вспомогательных богатых анимаций и взаимодействий.

например датьg-progressДобавьте эффект перехода:

.g-progress {
    // ...
    transition: width .2s linear;
}

Таким образом, каждое изменение прогресса представляет собой процесс динамического перехода:

Или, градиентный цвет переднего плана, изменитьbackground: #0f0дляbackground: linear-gradient(90deg, #0f0, #0ff):

Одна метка с использованием градиентной реализации

Конечно, вы можете видеть, что выше мы использовали структуру из двух тегов:

<div class="g-container">
    <div class="g-progress"></div>
</div>

Чтобы быть скупым, мы также можем использовать только одну метку для достижения этого, в основном с помощью градиентов:

<div class="g-progress"></div>

.g-progress {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0);
    border: 1px solid #eee;
}

Результат выглядит следующим образом:

Точно так же мы можем использовать HTMLstyleСвойства заполненыbackgroundЗначение передает фактический процент. Конечно, для передачи значения рекомендуется использовать пользовательские свойства CSS:

<div class="g-progress" style="--progress: 50%"></div>

.g-progress {
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
}

Учащиеся, знакомые с CSS, обнаружат недостаток текущего метода, заключающийся в том, что при изменении--progressзначение, даже если дано.g-progressДобавленtransition, и анимации перехода не будет.

Причина в том, что в CSS градиенты (например,linear-gradinet,radial-gradient,conic-gradient) не поддерживают преобразования перехода.

Итак, здесь, чтобы добиться эффекта анимации, мы можем использовать CSS @property для преобразования нашего кода:

<div class="g-progress" style="--progress: 70%"></div>

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

С характеристиками CSS @Property мы также можем реализовать анимационные эффекты на одной метке:

CodePen Demo — эффект индикатора выполнения с одной меткой

Если вы еще не знакомы с CSS @property, вы можете прочитать эту мою статью —CSS @property делает невозможное возможным

Конечно, это больше, чем просто вышеперечисленное.процент,а такжеГрадиентСуществует два способа реализовать этот наиболее распространенный индикатор выполнения.Все те, которые могут реализовать изменение длины, могут фактически использоваться для реализации индикатора выполнения, включая, помимо прочего:

  • ширина (более просто использовать ширину в процентах)
  • Градиент (значение, которое управляет процентом точки перехода градиента)
  • градиентbackground-size
  • transfrom: scale()(Увеличение также может изменить размер ширины)
  • clip-pathобрезать
  • ...(и т.д., и т.д.)

Здесь нет дальнейшего развития.

дугообразный индикатор выполнения

Конечно, индикатор выполнения может быть не только линейным. Есть много других типов, давайте сначала взглянем на индикатор выполнения в форме дуги.

Сегодня мы можем использовать CSS для быстрого создания индикатора выполнения в виде дуги, примерно так:

image

Ядро заключается в использовании угловых градиентовbackground: conic-gradient():

<div class="g-progress"></div>

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
}

Используйте угловые градиентыbackground: conic-gradient(), мы можем легко реализовать такую ​​круговую диаграмму:

Следующим шагом будет вырезание средней части.

Традиционная идея состоит в том, чтобы наложить круг посередине, однако большим недостатком этого является то, что если наш фон не сплошной, а градиентный, он не применяется, например:

Итак, как выдолбить середину, чтобы сделать среднюю часть прозрачной? Здесь мы можем ловко пройтиmaskАтрибут достигает цели, выдалбливая середину:

.g-progress {
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
  + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
}

Таким образом, мы можем легко выдолбить середину, даже если фон не однотонный.

Демонстрация CodePen — Angular Gradient реализует индикатор выполнения дуги

На основе этого расширения также может быть реализован многоцветный индикатор выполнения в форме дуги:

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
    background: 
        conic-gradient(
            #FFCDB2 0, #FFCDB2 25%, 
            #B5838D 25%, #B5838D 50%, 
            #673ab7 50%, #673ab7 90%,
            #ff5722 90.2%, #ff5722 100%
        );
}

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

Ограничение углового градиента для реализации индикатора выполнения дуги

Конечно, у этого подхода есть два недостатка.

  1. Конечно, когда процент прогресса не похож на такие числа, как 0°, 90°, 180°, 270° и 360°, при использовании угловых градиентов будет очевидная пилообразная связь между разными цветами.

посмотреть примерconic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):

Решение этой проблемы состоит в том, чтобы оставить некоторое пространство для градиента соответствующим образом в соединении.Давайте просто преобразуем приведенный выше код углового градиента:

{
  - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
  + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

Если внимательно посмотреть на приведенный выше код, он начнется с27%прибыть27%Изменение от27%прибыть27.2%, это дополнительно0.2%Просто чтобы устранить наложение, фактический измененный эффект:

Для конкретного использования вы можете выбрать диапазон, который не будет размытым и сможет максимально устранить алиасинг.

  1. Более проблематично реализовать индикатор выполнения дуги, для которого требуется круг в начале и в конце.

Существует также ситуация, в которой при реальном использовании требуется индикатор выполнения дуги с кружком в начале и конце, например, как показано на следующем рисунке:

Конечно, в этом случае, конечно, цвет индикатора выполнениясплошной цветЭто тоже можно решить, мы можем добиться такого эффекта, наложив два маленьких круга в начале и в конце.

Если индикатор выполнения имеет градиентный цвет, этот тип индикатора выполнения необходимо реализовать с помощью SVG/Canvas.

Для приведенного выше полного индикатора выполнения дуги с закругленными углами вы можете щелкнуть здесь, чтобы увидеть полный исходный код -CodePen Demo — индикатор выполнения дуги с кругом в начале и в конце

сферический индикатор выполнения

Сферические индикаторы выполнения также относительно распространены, как показано ниже:

Для сферического индикатора выполнения ядром является использование CSS для достижения эффекта волны в средней части.

Эта техника должна быть уже всем знакома, поэтому я не буду вдаваться в подробности.Картинка стоит тысячи слов.Вы можете использовать метод прокатки большого круга, подобный этому:

Контейнерное приложениеoverflow: hidden, вы можете получить такой эффект:

Если вы не понимаете эту технику, вы можете нажать на эту статью:Чистый CSS для достижения эффекта волны!

Чтобы применить эту технику, просто инкапсулируйте и контролируйте высоту волны, когда сферический контейнер представляет прогресс от 0% до 100%. Мы можем получить анимационные эффекты от 0% до 100%.

Полный код примерно такой:

<div class="container">
    <div class="wave-change"></div>
    <div class="wave"></div>
</div>

.container {
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
}
.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
    
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .6);
        border-radius: 45% 47% 43% 46%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 7s linear infinite;
        z-index: 1;
    }
    
    &::after {
        border-radius: 47% 42% 46% 44%;
        background-color: rgba(255, 255, 255, .8);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 9s linear -4s infinite;
        z-index: 2;
    }
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}

@keyframes rotate {
   to {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
@keyframes change {
    from {
        top: 80px;
    }
    to {
        top: -120px;
    }
}

Для полного примера кода вы можете нажать здесь:

Трехмерный индикатор выполнения

Что ж, индикатор выполнения 3D ниже требует базовых знаний CSS 3D.

Вы можете сначала прочитать эту статью -Причудливые 3D-анимации CSS | Насколько удивительно вы можете создавать анимации, используя только CSS?

В основном используется 3D-куб. Далее давайте реализуем индикатор выполнения куба~

Во-первых, реализуйте куб со следующей структурой:

<div class="demo-cube perspective">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="left"></li>
  </ul>
</div>

Мы можем представить этот куб как контейнер трехмерного индикатора выполнения.Управляя цветом 6 сторон, мы можем умело получить эффект трехмерного индикатора выполнения.

Конечно, на самом деле нам не нужно столько граней, достаточно 4 граней, убрать левую и правую, а затем использовать градиент для изменения цвета каждой грани куба, убрать границу, основной код CSS следующим образом:

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

Мы можем получить очень классный 3D-эффект индикатора выполнения:

image

Анимируйте трехмерный индикатор выполнения с помощью свойств CSS

Конечно же, прогресс-бар, для него нужна анимация заливки. Поскольку мы используем индикатор прогресса, реализованный градиентом, нам нужно контролировать процентное изменение цвета в нем.

Обычно CSS не поддерживает градиентную анимацию, но нас это не беспокоит, потому что мы можем использовать CSS @Property.

Просто измените код:

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {
    --per: 0%;
  }
  90%,
  to {
    --per: 80%;
  }
}

Таким образом, мы реализовали движущийся трехмерный индикатор выполнения, просто нужно контролировать--perПользовательских свойств CSS достаточно, эффект следующий:

Если вы мало знаете о CSS @Property, вы можете прочитать эту статью автора —CSS @property делает невозможное возможным, его появление значительно улучшило возможности CSS по созданию различных анимаций.

Полный код выше, вы можете ударить здесь:Вдохновение CSS — индикатор выполнения 3D-куба

расширенное расширение

В этой статье рассказывается, как шаг за шагом создавать индикатор выполнения с помощью HTML/CSS, от простого к сложному, и постепенно усложнять задачу.

Конечно, по мере увеличения сложности вы получаете более крутую полосу прогресса.

Основываясь на представленном выше методе, мы можем в основном развивать различные индикаторы выполнения, которые нам нужны. Например, на основе вышеописанного метода можно реализовать простую анимацию зарядки аккумулятора:

Конечно, CSS постоянно меняется, и типы индикаторов выполнения определенно не ограничиваются вышеперечисленными категориями. Например, мы можем использовать фильтры для имитации анимации зарядки мобильных телефонов Huawei, что также является методом представления индикаторов выполнения, а также может быть реализовано с использованием чистого CSS:

Полная реализация вышеуказанных эффектов может быть штампована --Разумное использование CSS для получения крутой анимации зарядки

В качестве альтернативы, мы можем побеспокоиться о текстуре индикатора выполнения:

Эффект происходит отCodePen -- Bars By Lucagaz.

В общем, удивительный мир CSS стоит того, чтобы его изучить.

наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории