登録などの進捗を可視化するのに、インジケーターを使った表記方法があります。
今自分の作っているousenuiライブラリでも、プログレスインジケーターを使うことで
進捗具合を見せることができます。
valueで進行度・secondary-valueで最大値を設定することができます。
import { ProgressCircular } from 'react-onsenui';
<div className="title-box">
<div className="progress-circular-box">
<ProgressCircular value="20" secondary-value="100">
<span className="progress-text">2/10</span>
</ProgressCircular>
</div>
<span className="title">利用規約</span>
</div>
ons-progress-circular {
display: block;
width: 54px;
height: 42px;
position: relative;
}
.progress-text{
position: absolute;
margin: 14px 16px;
font-size: 0.9em;
}
.progress-text{
position: absolute;
margin: 14px 16px;
font-size: 0.6rem;
}
.progress-circular--material__primary{
stroke: #FF9956;
stroke-width: 10%;
}
.progress-circular--material__secondary{
stroke: #ffddc7;
stroke-width: 10%;
}
android・iosでも同じ見た目で動きます。
