Bootstrapを活用しよう! 【Ⅶ. スピナーの作成】

皆さん、本日もお疲れ様です。

今回は、「スピナーの作成」方法について解説させて頂きたいと思います。

では、、はじめていきましょう!!

Bootstrapを用いたスピナーの作成方法

Bootstrapを用いたスピナーの作成方法

スピナーとは??

　　　　　↓

==============================================

● コンポーネントまたはページの読み込み状態を示すもの

[ 例 ]

youtu.be

==============================================

今回は、上記の実行例にて表示されている順番に
コードの紹介をさせて頂ければと思います。

※ サンプルコードは、bodyタグ内に記述するようにしてください。

ボーダースピナー

[ コード ]

<!-- HTML -->
<span id="bp">■ <b>ボーダースピナー</b></span>
<br>
<br>
<div class="spinner-border" id="bo" role="status">
  <span class="sr-only" >Loading...</span>
</div>

<!-- CSS -->

<style>
  
#bp {
      margin-left:15px;
      font-size:20px;
}

#bo {
      margin-left:50px;
}
  
</style>

色の設定方法

[ コード ]

<span id="bp">■ <b>色の変更</b></span>
<br>
<br>
<!-- 青 -->
<div class="spinner-border text-primary" id="bo"  role="status">
  <span class="sr-only">Loading...</span>
</div>
<!-- グレー -->
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<!--  緑  -->
<div class="spinner-border text-success" role="status">
   <span class="sr-only">Loading...</span>
</div>
<!-- 赤 -->
<div class="spinner-border text-danger" role="status">
   <span class="sr-only">Loading...</span>
</div>
<!--  黄色 -->
<div class="spinner-border text-warning" role="status">
   <span class="sr-only">Loading...</span>
</div>
<!-- 水色 -->
<div class="spinner-border text-info" role="status">
   <span class="sr-only">Loading...</span>
</div>
<!-- 白 -->
<div class="spinner-border text-light" role="status">
   <span class="sr-only">Loading...</span>
</div>
<!-- 黒 -->
<div class="spinner-border text-dark" role="status">
   <span class="sr-only">Loading...</span>
</div>

グロウイングスピナー

[ コード ]

<!-- HTML -->
<span id="bp">■ <b>グロウイングスピナー</b></span>
<!-- 色の指定方法はボーダースピナーと同様 -->
<br>
<br>
<div class="spinner-grow" role="status" id="bo">
  <span class="sr-only">Loading...</span>
</div>

<!-- CSS -->
<style>
  
#bp {
      margin-left:15px;
      font-size:20px;
}

#bo {
      margin-left:50px;
}
  
</style>

ボタン内にスピナーを設定 [ ボーダー ]

[ コード ]

<!-- CSSはこれまでのものと同様のものを使用-->
<span id="bp">■ <b>ボタン内のスピナー [ボーダー]</b></span>
<br>
<br>
<!--  左側のボタン  -->
<button class="btn btn-primary" type="button" disabled id="bo">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 <span class="sr-only">Loading...</span>
</button>
<!-- 右側のボタン -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
               Loading...
</button>

ボタン内にスピナーを設定 [ グロウイング ]

[ コード ]

<!-- CSSはこれまでのものと同様のものを使用-->
<span id="bp">■ <b>ボタン内のスピナー [ボーダー]</b></span>
<br>
<br>
<!--  左側のボタン  -->
<button class="btn btn-primary" type="button" disabled id="bo">
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 <span class="sr-only">Loading...</span>
</button>
<!-- 右側のボタン -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
               Loading...
</button>