每个进度条如何具有不同的颜色？

时间：2020-03-30 16:59:18

标签： javascript css animation colors progress-bar

我正在尝试为每个进度栏使用不同的颜色。我无法更改第二个栏的颜色，依此类推。是否应该为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 :(得分：0)

我建议您在指定条形颜色的地方插入一个css子类。

答案 1 :(得分：0)

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

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;

}

答案 2 :(得分：0)

您可以有多种颜色，而不是可以在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>

答案 3 :(得分：0)

您只需要更改颜色。在此示例中，我向每个.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>

相关问题
最新问题