progressタグに対するデザイン適用
社内のesaに愚痴的に書いたものをパクって転載。(パクってって書いたけど自分で書いたものね)
progress タグにデザインを当てるには、The HTML5 progress Element のように [value] や -webkit-progress-value を指定してそこにいろいろ記述していくのだけれども、-webkit-progress-bar に after/before 疑似要素が、少なくとも Chrome/Chromium だと指定しても無視される様子。なので、progress の右端に現在の%をcontentで表示したり画像載せるのは難しいっぽい。
progress {
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
border: 0;
width: 100%;
height: 5px;
&[value] {
border: 0;
-webkit-appearance: none;
&::-webkit-progress-value {
transition: all .2s ease;
background-color: $progress-bar-color;
transition-delay: 0;
}
}
}
徐々に表示が右にずれていくようにしたかったため、span タグを使って回避した。
経過とともに progress が ++ されていくようにしているので width が され 、右端に画像が表示されるように指定しているのでそれが に動いていく(ように見えるようになる)。(裏でprogressの計算はしている)
<span className="p-progress-icon-area" style=\{\{width: `${progress}%`\}\}>
<img src="assets/images/emoji/koko.png" className="p-progress-icon" />
</span>
※記事buildの都合でstyle={{}}のところをescapeしております
.p-progress-icon {
width: .8em;
height: .8em;
vertical-align: middle;
}