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

동적 색상을 사용하여 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" */ linea.....