Как сделать разные цвета для каждого индикатора? - PullRequest
Новая
       38

Как сделать разные цвета для каждого индикатора?

1 голос
/ 30 марта 2020

Я пытаюсь иметь разные цвета для каждого индикатора выполнения. Я не могу изменить цвет второго бара и так далее. Должен ли я создать класс для каждого бара в JavaScript, чтобы добавить цвет? Как я могу загрузить эту же анимацию с разными цветами для каждой полосы?

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

Html: 

   <div class="progressbar">
      <h1 class="title">My Tools & Skills</h1>
      <div class="skill-progress">
        <h3>HTML5</h3>
        <div class="progress">
          <div class="progress-done" data-done="70">
          </div>
        </div>

        <div class="progress">
          <div class="progress-done" data-done="60">
          </div>
        </div>

        <div class="progress">
          <div class="progress-done" data-done="50">
          </div>
        </div>

        <div class="progress">
          <div class="progress-done" data-done="40">
          </div>
        </div>

      </div>
    </div>

CSS: 

  .progressbar h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
  color: #666666;
  margin: auto;

}

.skill-progress {
  margin-bottom: 10px;
}

.progress {
  background-color: #f2f2f2;
  border-radius: 20px;
  height: 25px;
  width: 450px;
  margin: 20px auto;

}


.progress-done {
  background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
  border-radius: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 0;
  opacity: 0;
  transition: 4s ease 0.3s;

}

JS: 

const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
  const done = progress.getAttribute('data-done');
  const duration = getComputedStyle(progress).transitionDuration;
  const timeoutDuration = +duration.slice(0, 1) * 1000;
  progress.style.width = done + "%";
  progress.style.opacity = 1;


  for (let i = 0; i <= done; i++) {
    setTimeout(() => {
      progress.innerText = i + "%";
    }, (timeoutDuration / done) * i);
  }

});

Ответы [ 4 ]

0 голосов
/ 30 марта 2020

Вам просто нужно изменить цвета. В этом примере я добавил цветовой класс для каждого элемента .progress, а затем создал класс для каждого дочернего элемента с соответствующим цветом. 

const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
  const done = progress.getAttribute('data-done');
  const duration = getComputedStyle(progress).transitionDuration;
  const timeoutDuration = +duration.slice(0, 1) * 1000;
  progress.style.width = done + "%";
  progress.style.opacity = 1;


  for (let i = 0; i <= done; i++) {
    setTimeout(() => {
      progress.innerText = i + "%";
    }, (timeoutDuration / done) * i);
  }

});
.progressbar h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
  color: #666666;
  margin: auto;

}

.skill-progress {
  margin-bottom: 10px;
}

.progress {

  border-radius: 20px;
  height: 25px;
  width: 450px;
  margin: 20px auto;

}



.progress-done {
  border-radius: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 0;
  opacity: 0;
  transition: 4s ease 0.3s;
}	

.red{  background-color: #ff0000; }
.blue{  background-color: #0000ff; }
.green{  background-color: #00ff00; }
.yellow{  background-color: #ffff00; }

.red .progress-done {
  background: linear-gradient(to right, #ff0000 0%, #ffffff 100%);
  box-shadow: 0 3px 3px -5px #ff0000, 0 2px 5px #ffffff;
}

.blue .progress-done {
  background: linear-gradient(to right, #0000ff 0%, #ffffff 100%);
  box-shadow: 0 3px 3px -5px #0000ff, 0 2px 5px #ffffff;
}
.green .progress-done {
  background: linear-gradient(to right, #00ff00 0%, #ffffff 100%);
  box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #ffffff;
}

.green .progress-done {
  background: linear-gradient(to right, #ffff00 0%, #ffffff 100%);
  box-shadow: 0 3px 3px -5px #ffff00, 0 2px 5px #ffffff;
}
   <div class="progressbar">
      <h1 class="title">My Tools & Skills</h1>
      <div class="skill-progress">
        <h3>HTML5</h3>
        <div class="progress red">
          <div class="progress-done" data-done="70">
          </div>
        </div>

        <div class="progress blue">
          <div class="progress-done" data-done="60">
          </div>
        </div>

        <div class="progress green">
          <div class="progress-done" data-done="50">
          </div>
        </div>

        <div class="progress yellow">
          <div class="progress-done" data-done="40">
          </div>
        </div>

      </div>
    </div>
0 голосов
/ 30 марта 2020

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

HTML

<div class="progress progress-1">
    <div class="progress-done" data-done="70"></div>
</div>

<div class="progress progress-2">
    <div class="progress-done" data-done="60"></div>
</div>

CSS

.progress-1 .progress-done { 
    background: linear-gradient(to right, #f83600 0%, #f9d423 100%); 
    box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423; 
}

.progress-2 .progress-done { 
    background: linear-gradient(to right, #e7e7e7 0%, #f9f9f9 100%); 
    box-shadow: 0 3px 3px -5px #e7e7e7, 0 2px 5px #f9f9f9; 
}

.progress {
  background-color: #f2f2f2;
  border-radius: 20px;
  height: 25px;
  width: 450px;
  margin: 20px auto;

}

.progress-done {
  /* Remove colour from here */
  border-radius: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 0;
  opacity: 0;
  transition: 4s ease 0.3s;

}
0 голосов
/ 30 марта 2020

У вас может быть много цветов, чем вы можете хранить данные в массиве в js. Если у вас очень ограниченная комбинация, вы можете создать класс как .progress-done.success .progress-done.error .progress-done.info

Пример: 

const progresses = document.querySelectorAll(".progress-done");
const colors = [
  ["#f83600", "#f9d423"],
  ["#f8ff00", "#f9d423"],
  ["#f83660", "#f9d423"],
  ["#f86600", "#f9d423"],
  ["#f86600", "#f9d423"],
  ["#f86600", "#f9d423"]
];
progresses.forEach((progress, index) => {
  const [bgColor, bgShadow] = colors[index];
  const background = `linear-gradient(to right, ${bgColor} 0%, ${bgShadow} 100%)`;
  const boxShadow = `0 3px 3px -5px ${bgColor}, 0 2px 5px ${bgShadow}`;
  const done = progress.getAttribute('data-done');
  const duration = getComputedStyle(progress).transitionDuration;
  const timeoutDuration = +duration.slice(0, 1) * 1000;
  progress.style.width = done + "%";
  progress.style.opacity = 1;
  progress.style.background = background;
  progress.style.boxShadow = boxShadow;
  for (let i = 0; i <= done; i++) {
    setTimeout(() => {
      progress.innerText = i + "%";
    }, (timeoutDuration / done) * i);
  }
});
// By class name
progresses[4].className += " success" 
progresses[5].className += " info" 
.progressbar h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.2em;
            color: #666666;
            margin: auto;

        }

        .skill-progress {
            margin-bottom: 10px;
        }

        .progress {
            background-color: #f2f2f2;
            border-radius: 20px;
            height: 25px;
            width: 450px;
            margin: 20px auto;

        }


        .progress-done {
            background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
            box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
            border-radius: 20px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 0;
            opacity: 0;
            transition: 4s ease 0.3s;

        }
        .progress-done.success {
            background: linear-gradient(to right, #00ff00 0%, #f9d423 100%) !important;
            box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #f9d423!important;
        }
        .progress-done.info {
            background: linear-gradient(to right, #00ffff 0%, #00ff00 100%)!important;
            box-shadow: 0 3px 3px -5px #00ffff, 0 2px 5px #00ff00!important;
        }
<div class="progressbar">
            <h1 class="title">My Tools & Skills</h1>
            <div class="skill-progress">
                <h3>HTML5</h3>
                <div class="progress">
                    <div class="progress-done" data-done="70">
                    </div>
                </div>

                <div class="progress">
                    <div class="progress-done" data-done="60">
                    </div>
                </div>

                <div class="progress">
                    <div class="progress-done" data-done="50">
                    </div>
                </div>

                <div class="progress">
                    <div class="progress-done" data-done="40">
                    </div>
                </div>

            </div>
        </div>
0 голосов
/ 30 марта 2020

Я предлагаю вам вставить подкласс css, где вы указываете цвет полосы.

...