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

【React】ローディングアイコンを簡単に実装できるライブラリ「react-loading」

最近、備忘録のように使用したライブラリのまとめが多いですが…今回もそれです。
今日は「react-loading」という、ローディングアイコンを実装できるライブラリについてご紹介です。

ローディングアイコンやローディング画像は、GIF アニメーション画像を使うことが多かったのですが、このライブラリを使えば、画像を <img> タグで挿入することなく追加することができます。

GitHub のページはこちら。

GitHub – fakiolinho/react-loading: React component for loading animations
https://github.com/fakiolinho/react-loading

デモページはこちらです。

React Loading Demo – CodeSandbox
https://codesandbox.io/s/mqx0ql55qp

8種類のローディング画像を選択することができます。

 

使い方ですが、まず下記コマンドでインストールします。

npm i react-loading --save

インストールが完了したら、あとは下記のように使用するだけです。
なお、下記のコードは GitHub に掲載されていたものをほぼ転載させて頂いております。

import React from 'react';
import ReactLoading from 'react-loading';

const Example = () => (
    <ReactLoading type="spin" />
);

export default Example;

5行目でローディングアイコンを表示していますが、Propstype で、表示したいローディングアイコンの種類を指定しています。
なお、今回は指定していませんが、アイコンの色やサイズも指定できます。
何も指定しない場合、デフォルトの色は白色で、サイズは 64px × 64px です。
上記のサンプルでは、よくありがちなフラフープがクルクルと回っているようなアイコンを指定しています。
他にも、正方形がカコカコと動く Cubes というローディングアイコンや、丸がいくつもクルクルと円を描いて回る SpinningBubbles というアイコンもありました。
8種類もありますので、恐らく好みのローディングアイコンが見つかると思います。

 

以上、React でローディングアイコンを簡単に実装できるライブラリ「react-loading」のご紹介でした。
ご参考になれば幸いです。

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