如何为每个进度条设置不同的颜色？

Question

我正在尝试为每个进度条设置不同的颜色。我无法更改第二个栏的颜色，依此类推。我应该为 JavaScript 中的每个栏创建一个 class 来注入颜色吗？如何为每个栏加载不同颜色的相同动画？

您好，我正在尝试为每个进度条设置不同的颜色。我无法更改第二个栏的颜色，依此类推。我应该为 JavaScript 中的每个栏创建一个 class 来注入颜色吗？如何为每个栏加载不同颜色的相同动画？

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);
  }

});

Answer 1

我建议您插入一个 css 子类，您可以在其中指定条形的颜色。

Answer 2

为什么不为每个进度条添加唯一的类？

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;

}

Answer 3

你可以有很多颜色，而不是你可以在 js 中将数据保存在数组中。如果你的组合非常有限，你可以创建 class 比如 .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>

Answer 4

您只需更改颜色即可。在此示例中，我向每个 .progress 元素添加了一个颜色 class，然后为每个具有相应颜色的子元素创建了 class。

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>

如何为每个进度条设置不同的颜色？

How to have different color for each progress bar?

javascript

css

animation

colors

progress-bar