CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでローディングボタンを作成する方法｜Font Awesomeを使った実装例

CSSとFont Awesomeのアイコンを組み合わせれば、JavaScriptに頼らずにスピナーが回転する「ローディングボタン」を簡単に作成できます。ここでは、3種類のローディングアイコンを使った具体的な実装例を紹介します。

実装例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
    background-color: rgb(60, 24, 126);
    border: none;
    outline: none;
    color: white;
    padding: 12px 24px;
    font-size: 26px;
}
h1 {
    font-size: 50px;
    font-family: monospace, sans-serif, serif;
}
i {
    margin-left: -12px;
    margin-right: 8px;
}
</style>
</head>
<body>
<h1>Loading Buttons Example</h1>
<button><i class="fa fa-spinner fa-spin"></i>Loading</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
<button><i class="fa fa-refresh fa-spin"></i>Loading</button>
</body>
</html>

コードのポイント

  • fa-spinクラス：Font Awesomeが提供するアニメーションクラスで、指定したアイコンを連続的に回転させます。CSS側で追加のキーフレームを書く必要はありません。
  • アイコンの種類：fa-spinner（セグメント状の円）、fa-circle-o-notch（ノッチ入りの輪）、fa-refresh（更新マーク）の3種類を使用しています。
  • ボタンのスタイル：背景色やパディング、フォントサイズはbuttonセレクターで自由にカスタマイズできます。
  • アイコンの位置調整：i要素にネガティブマージンを設定することで、テキストとのバランスを整えています。

表示結果

上記のコードをブラウザで開くと、紫色のボタンの中でアイコンがくるくると回転し続けるローディングボタンが3つ並んで表示されます。

CSSでローディングボタンを作成する方法｜Font Awesomeを使った実装例

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>