Блог

Главная - Вопросы по программированию - Частичный цвет в нижней границе для отображения индикатора выполнения

Частичный цвет в нижней границе для отображения индикатора выполнения

#css

#css

Вопрос:

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

Мы можем сделать это с помощью фона:

     background-image: linear-gradient(90deg, green 10%, red 0%, red 100%);

Это приведет к созданию div, который на 10% зеленый и на 90% красный. Можно ли использовать аналогичный метод для нижней границы div? Кроме того, можно ли регулировать ширину этой нижней границы так, чтобы она составляла 3 пикселя?

Ответ №1:

Я бы предпочел создать для него элемент, но вы можете сделать что-то вроде этого:

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

 body {
  margin: 0;
  padding: 0;
}

header {
  --progress: 10%;

  background-color: khaki;
  height: 3rem;
  border-bottom: 3px solid;
  
  border-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%) 1;
}  
 <header></header>

[РЕДАКТИРОВАТЬ] Я могу добавить, как я бы настроил индикатор выполнения с псевдоэлементами. Я бы предпочел использовать два (один в качестве фона, другой в качестве прогресса), чтобы было проще анимировать прогресс.

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

 let headerElements = document.querySelectorAll('header');

function updateHeaders(value) {
  headerElements.forEach((header) => {
    header.style.setProperty('--progress', value   "%");
  });
}  
 body {
  --primary-color: lightblue;
  
  margin: 0;
  padding: 0;
}

header {
  --progress: 30%;

  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  
  /* RELEVANT CSS */
  position: relative;
}

  /* RELEVANT CSS */
header.progressbar::before,
header.two.pseudo-elements.progressbar::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
}

header.one.pseudo-element.progressbar::before {
  background-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%);
}

header.two.pseudo-elements.progressbar::before {
  z-index: 2;
  right: initial;
  width: var(--progress);
  background-color: green;
  transition: width 300ms linear;
}

header.two.pseudo-elements.progressbar::after {
  z-index: 1;
  background-color: red;
}

/* PLACEHOLDER CSS BELOW */
input[type="range"] {
  margin: 1rem 0px;
  width: 100%;
}

div[title="Logotype"] {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Verdana";
  font-size: 36px;
  padding: 0.25rem;
  margin: 0.5rem;
  background-color: white;
  border-radius: 50%;
}

header > a {
  padding: 0px 0.5rem;
  color: #121212;
}  
 <h3>One pseudo-element</h3>
<header class="one pseudo-element progressbar">
  <div title="Logotype">L</div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</header>

<h3>Two pseudo-elements</h3>
<header class="two pseudo-elements animate progressbar">
  <div title="Logotype">L</div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</header>

<input type="range" oninput="updateHeaders(this.value)" value="30" />

Комментарии:

1. Интересно, что вы предпочли бы использовать для этого отдельный элемент. Есть ли причина доступности или что-то еще?

2. Это скорее соглашение о программировании. Пусть каждый элемент выполняет одно действие, а не несколько. Как в моем примере: header должны отображаться элементы в заголовке (как контейнер), а не также отображать прогресс. Я бы предпочел добавить div или псевдоэлемент с абсолютным позиционированием внутри header . Это имеет еще больший смысл, когда вы используете пользовательские элементы с функциональностью (CSS, javascript), содержащейся в них.

3. Спасибо, я действительно не думал об этом раньше.

4. Спасибо. Хороший момент в том, что нельзя использовать красный и зеленый цвета из-за дальтонизма. Как мы можем использовать псевдоэлемент с абсолютным позиционированием в заголовке, чтобы сделать то же самое? Причина, по которой я пытаюсь избежать создания нового элемента для индикатора выполнения, заключается в том, что заголовок вверху липкий, а я не эксперт по CSS, поэтому введение новых элементов может испортить существующий макет.

5. Не беспокойтесь. Я отредактировал сообщение с двумя примерами того, как это может выглядеть.