2016年9月10日土曜日

[MDL] スピナーを中央寄せにする

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、スピナーを中央寄せにするサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

width: 50%; スタイルを設定した <div> タグをスピナーの前後に追加します。

<div class="spinner-spacer"></div> <!-- width: 50%; -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<div style="spinner-spacer"></div> <!-- width: 50%; -->

さらに、以下のスタイルの <div> タグで、スピナーと追加した <div> 要素を囲みます。

.spinner-container {
    align-items: center;
    display: flex;
}


参考

0 件のコメント:

コメントを投稿