[Javascript] プログレスバーを表示してみました

yasu (79)memberin Steem Japan • 2 years ago (edited)

こんにちは、@yasuです。

HTML5でプログレスバーが追加されています。

複数の色で表現してみました。

カスタマイズする場合、ChromeとFirefoxで表記が異なります。

今回は、Chromeに対応していますが、Edgeでも表示できていました！

実行方法

https://ojagggyo.github.io/javascript/progress.html

実行結果

Chrome

Edge

ソース

<html>
<head>
<style>
progress {
  -webkit-appearance: none;
  width: 100%;
  height: 3rem;
}
::-webkit-progress-bar {
  background-color: glay;
}
.votingpower::-webkit-progress-value {
  background-color: #217ab7;
}
.downvotepower::-webkit-progress-value {
  background-color: #5bc0de;
}
.resourcecredits::-webkit-progress-value {
  background-color: #5eb85e;
}
</style>
</head>
<body>
プログレスバーを表示する。
<br/>
    <progress value=0.8 class=votingpower></progress>
    <br/><br/>
    <progress value=0.8 class=downvotepower></progress>
    <br/><br/>
    <progress value=0.8 class=resourcecredits></progress>
</body>
</html>

ありがとうございました。

steemit サインアップ
https://ojagggyo.github.io/steemitsignup

steemit 知識
https://ojagggyo.github.io/steemittips

日本語 Steemit Discord (超初心者～誰でも)
https://discord.gg/zKJgfzS