progressタグに対するデザイン適用

2017-03-12

社内の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;
}

なんか書いていこうぜー .com

Let's write something good

progressタグに対するデザイン適用