동적 색상이 포함된 진행률 표시줄

동적 색상을 사용하여 CSS 전용 진행 표시줄을 만듭니다. 값에 따라 색상이 변경됩니다.

• 자바스크립트 없음
• 특정 CSS 선택기가 없습니다.

progress[value] {
  --w:200px; /* The width */
  /* The background property */
  --b: /* static layers */
      linear-gradient(#fff8,#fff0),
      repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),
      /* dynamic layers */
      /* if < 30% "red" */
      linear-gradient(red    0 0) 0 /calc(var(--w)*.3 - 100%) 1px,
      /* if < 60% "orange" */
      linear-gradient(orange 0 0) 0 /calc(var(--w)*.6 - 100%) 1px,
      /* else "green" */
      green;
  width: var(--w); 
  height: 20px;
  background-color: lightgrey;
  border-radius: 50px;
}
progress[value]::-webkit-progress-bar {
  background-color: lightgrey;
  border-radius: 50px;
}
progress[value]::-webkit-progress-value {
  border-radius: 50px;
  background:var(--b);
}
progress[value]::-moz-progress-bar {
  border-radius: 50px;
  background:var(--b);
}