浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【onsenUI】プログレスインジケーターを使って進捗度を反映する

登録などの進捗を可視化するのに、インジケーターを使った表記方法があります。

今自分の作っている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でも同じ見た目で動きます。

  • この記事いいね! (0)