1

Всем привет.

Как при помощи JS задать разный % шкалы прогресса у каждого из навыков, при условии, что я хочу оставить один общий класс в HTML

.progress {
    border-radius: 10px;
    width: 150%;
    height: 7px;
    overflow: hidden;
    background: linear-gradient(to right, #235F67,#40A0B0);
}

.grayback {
    position: relative;
    left: 92%; /* Текущее состояние */
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
        <div class="progress">
            <div class="grayback"></div>
        </div>

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

Как должно быть в идеале

3 ответа 3

5

Решение 1

Вообще можно сделать вот так:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(90, 90, 90);
}

.progress {
  background-color: rgb(255, 255, 255);
  height: 6px;
  border-radius: 16px;
  overflow: hidden;
  margin: 1em;
}

.progress-actual {
  width: var(--progress);
  background-image: linear-gradient(to right, rgb(35, 95, 103), rgb(62, 155, 170));
  height: 100%;
}
<div class="progress">
  <div class="progress-actual" style="--progress: 25%;"></div>
</div>

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

<div class="progress">
  <div class="progress-actual" style="--progress: 75%;"></div>
</div>

<div class="progress">
  <div class="progress-actual" style="--progress: 100%;"></div>
</div>

Решение 2

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(90, 90, 90);
}

.progress {
  background-color: rgb(255, 255, 255);
  height: 6px;
  border-radius: 16px;
  overflow: hidden;
  margin: 1em;
}

.progress::before {
  content: '';
  width: var(--progress);
  height: 100%;
  display: block;
  background-image: linear-gradient(to right, rgb(35, 95, 103), rgb(62, 155, 170));
}
<div class="progress" style="--progress: 25%;"></div>
<div class="progress" style="--progress: 50%;"></div>
<div class="progress" style="--progress: 75%;"></div>
<div class="progress" style="--progress: 100%;"></div>

Решение 3 (Продивинутое)

Так как у вас в метках указан , решил также сделать удобную реализацию через JavaScript, вот так:

class Progress {
  constructor(percentage) {
    let _percentage = +percentage

    percentage = _percentage && !isNaN(_percentage) ? _percentage : 0

    let node = document.createElement('div')

    node.className = 'progress'
    node.setAttribute('style', `--progress: ${percentage}%;`)
    node.dataset.progress = percentage

    this.percentage = percentage
    this.node = node
  }

  init(parentNode) {
    let percentage = this.percentage
    let node = this.node

    setProgress(node, percentage)

    if(parentNode) {
      parentNode.appendChild(node)
    }

    return {
      increase(n) {
        let current = this.current()

        setProgress(node, current + n)
      },
      decrease(n) {
        let current = this.current()

        setProgress(node, current - n)
      },
      current() {
        return getProgress(node)
      },
      getNode() {
        return node
      }
    }
    
    function getProgress(_node) {
      return +_node.dataset.progress
    }

    function setProgress(_node, progress) {
      _node.setAttribute('style', '--progress:' + progress + '%;')
      _node.dataset.progress = progress
    }
  }
}

let progressBar1 = new Progress(25)
  .init(document.body)

let progressBar2 = new Progress(0)
  .init(document.body)

progressBar2.increase(75) // Увеличить на 75
progressBar2.decrease(25) // Уменьшить на 25

let progressBar3 = new Progress(75)
  .init()

console.log(progressBar3.current()) // Получить текущий процент в виде числа

let progressBar3Node = progressBar3.getNode() // Получить ноду (элемент) прогресс бара

if(progressBar3Node.tagName.toLowerCase === 'header') {
  console.log('Hello!')
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(90, 90, 90);
}

.progress {
  background-color: rgb(255, 255, 255);
  height: 6px;
  border-radius: 16px;
  overflow: hidden;
  margin: 1em;
}

.progress::before {
  content: '';
  width: var(--progress);
  height: 100%;
  display: block;
  background-image: linear-gradient(to right, rgb(35, 95, 103), rgb(62, 155, 170));
}

Как с этим работать?

В конструктор класса Progress первым (и единственным) аргументом приходит процент, можно вводить такие аргументы как: 42, "123", 42.42, "25.75", они все пробразуются в число (если аргумент не может быть преобразовон в число, вместо него будет использоваться 0), у класса есть метод init, в которым и происходит вся магия.

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

Сам метод init, возвращает объект с такими функциями: increase, decrease, current и getNode. increase - принимает в себя один аргумент (число), на это число прибавляется текущий процент. decrease - принимает в себя один аргумент (число), на это число убавляется текущий процент. current - возвращает текущий процент. getNode - возвращает ноду (элемент) прогресс бара.

4

Элемент progress создан как раз для этого

<progress value="0.25"></progress> Она <br/>
<progress value="0.5"></progress> Её отец <br/>
<progress value="0.75"></progress> Её брат <br/>
<progress value="1"></progress> Парень, о котором она просит не беспокоится <br/>
<progress value="0"></progress> Я <br/>

Им можно управлять и с помощью js:

document.querySelectorAll(`progress`).forEach((element, index) => {
  element.value = 1 / (index + 1);
});
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>
<progress></progress><br/>

5
  • 1
    На самом деле лучше использовать свой кастомный прогресс бар, так вы будете уверены что он будет выглядеть одинаково для всех браузеров (Важно для дизайна). Голос даю из-за первого сниппета :)
    – ΝNL993
    28 янв в 19:21
  • @ΝNL993 ну вообще progress можно стилизовать с помощью псевдоклассов. В Chrome и Safari - ::-webkit-progress-bar, ::-webkit-progress-value, в Firefox - ::-moz-progress-bar...
    – eccs0103
    28 янв в 19:26
  • 1
    @ΝNL993 я вообще стараюсь делать каждый ответ уникальным. В одном отсылку оставлю к книге, в другом мем сделаю... Когда в учебных материалах есть шуточная часть, то она лучше запоминается. :)
    – eccs0103
    28 янв в 19:28
  • Ой, ну не знаю, как минимум ::-moz-progress-bar - не является стандартом, могут возникнуть проблемы при использовании такого псевдо элемента. А про шутки я согласен :), так и вправду лучше запоминается.
    – ΝNL993
    28 янв в 19:34
  • 2
    Дал обоим по голосу, @ΝNL993 за отличное решение, а вам за шуточку. Но я все же тоже придерживаюсь, что лучше и надежнее сделать свой прогресс бар. 29 янв в 0:22
3

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

Установка значения вручную:

body { background-color: #5a5a5a; }

.progress {
  height: 7px;
  width: 100%;
  border-radius: 4px;
  background: 
    linear-gradient(to right, #ddd0 calc(var(--value, 0) * 1%), #ddd calc(var(--value, 0) * 1%)), 
    linear-gradient(to right, #235f67, #40a0b0);
}
<div class="progress" style="--value: 72"></div>

Динамическое изменение:

let progress = document.querySelector('.progress');
let input = document.querySelector('input[type="range"]');
input.addEventListener('input', (ev) =>
  progress.style.setProperty('--value', ev.target.value)
);
body { background-color: #5a5a5a; display: flex; flex-flow: column nowrap; gap: 2em; }

.progress {
  height: 7px;
  width: 100%;
  border-radius: 4px;
  background: 
    linear-gradient(to right, #ddd0 calc(var(--value, 0) * 1%), #ddd calc(var(--value, 0) * 1%)), 
    linear-gradient(to right, #235f67, #40a0b0);
}
<div class="progress"></div>
<input type="range">

Подстановка значений из массива:

let progresses = document.querySelectorAll('.progress');
let values = [65, 32, 11, 16, 92];
progresses.forEach((el, index) => el.style.setProperty('--value', values[index]));
body { background-color: #5a5a5a; display: flex; flex-flow: column nowrap; gap: 2em; }

.progress {
  height: 7px;
  width: 100%;
  border-radius: 4px;
  background: 
    linear-gradient(to right, #ddd0 calc(var(--value, 0) * 1%), #ddd calc(var(--value, 0) * 1%)), 
    linear-gradient(to right, #235f67, #40a0b0);
}
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>

5
  • 1
    Хм, какое интересное решение... Можете объяснить как оно работает? Зачем вы используете calc понятно, чтобы <integer> стал <percentage>.
    – ΝNL993
    29 янв в 7:28
  • @ΝNL993, даже не знаю, что объяснить. Мне бы конкретные вопросы.
    – UModeL
    29 янв в 8:21
  • Конкретно меня интересует почему второй linear-gradient заполняет прозрачное пространство указанное ранее? И почему вы по два раза указываете 72% в первом linear-gradient?
    – ΝNL993
    29 янв в 8:24
  • 1
    @ΝNL993, градиент, который указан выше, будет и располагаться поверх остальных. Два раза указывается, чтобы была чёткая граница между цветами.
    – UModeL
    29 янв в 8:28
  • Ага, вот оно значит как. Кстати я заметил что в первом linear-gradient, в конце вместо calc(var(--value, 0) * 1%), достаточно указать 0 и градиент всё равно будет работать.
    – ΝNL993
    29 янв в 9:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.