メニュー

読み込みに時間がかかるコンテンツがある場合は、ユーザーにフィードバックを提供する必要があります。そのために、私たちは多くのアクティビティと進捗状況のインジケーターを提供します。

線形

線形のプログレスバーには、いくつかの異なるタイプがあります。


確定

  <div class="progress">
      <div class="determinate" style="width: 70%"></div>
  </div>

未確定

  <div class="progress">
      <div class="indeterminate"></div>
  </div>

円形

円形のスピナーには、4 種類の色と 3 種類のサイズがあります。スピナーは preloader-wrapper div に入れ子にする必要があります。デフォルトのサイズは中ですが、クラス big または small を追加して、サイズを調整できます。クラス spinner-red-only、spinner-blue-only、spinner-yellow-only、spinner-green-only を追加できます。このクラスを spinner-layer のままにしておくと、variables.scss ファイルの $spinner-default-color 変数に設定されます。


色

  <div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>

  <div class="preloader-wrapper active">
    <div class="spinner-layer spinner-red-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>

  <div class="preloader-wrapper small active">
    <div class="spinner-layer spinner-green-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>

点滅する円のカラー


    <div class="preloader-wrapper big active">
      <div class="spinner-layer spinner-blue">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-yellow">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-green">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>