ワンライナーで実装可能なReact用スピナーがつくれる「Spinners React」

Spinners React
https://adexin.github.io/spinners/

Spinners Reactの特徴

「Spinners React」は、ワンライナーで実装可能なReact用スピナーがつくれるジェネレートサイトです。似たようなサイトは数多くありますが、Webサイトでスピナーを作成して簡単に導入できる、そして軽量なのが利用メリットといったところ。なお、こちらオープンソースとして公開されています。
https://github.com/adexin/spinners-react

セットアップ手順

$ npm install spinners-react

npmから構築するだけと非常に簡単。また、UMD bundleとして公開されており

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- to load a specific spinner -->
    <script src="https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js"></script>
    <!-- to load all spinners at once -->
    <script src="https://unpkg.com/spinners-react/lib/umd/index.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script>
      ReactDOM.render(
        React.createElement(SpinnersReact.SpinnerCircular),
        document.getElementById('root')
      );
    </script>
  </body>
</html>

このように、HTML形式で指定するだけでも実装ができます。表示するスピナーは、タグで指定するほか、Webサイトからジェネーレートする方法も提供されています。

スピナーの作成

スピナーの数は、9つと物足りないですが、オーソドックスなスタイルが提供されており、一般的なWebサイトであれば問題はなさそう。

右側のレンジから「サイズ」「スタイル」「カラー」「表示速度」を変更することができます。

あとは、スニペットをコピーして表示したい箇所に差し込むだけで実装完了です。

Spinners React
https://adexin.github.io/spinners/


コメントを読む

新着ピック  






















新着ニュース

火花散らすHuaweiとXiaomi 王者不在のSIMフリー市場で“下克上”が起きるか?

アキバの往来は準「日常」に戻った感じ

AWS Elemental Linkが届いたので開封してみた! | Developers.IO

Gen2 EPYC を搭載する「c5a」インスタンスのOpenSSL性能を確認してみた | Developers.IO

AWS Elemental MediaConvertで動画変換が完了した事をSlackに通知する仕組みを作ってみた | Developers.IO

AWS Elemental MediaConvertで...

DevelopersIO / 10時間前


【MediaPipe】Multi Hand Trackingで誰が商品を取ったか判別できる条件を確認する | Developers.IO

【MediaPipe】Multi Hand Track...

DevelopersIO / 12時間前


フジロックは21年8月に“延期” 「来年は2年分のエネルギーで」 今年のチケットも有効

Cloudinary の Named Transformation で画像変換 URL をシンプルにする | Developers.IO

Cloudinary の Named Transfor...

DevelopersIO / 12時間前


久しぶりに出社するときに気を付けること 社員証は持った?

Facebookの写真をGoogleフォトに暗号転送するツールが全世界で利用可能に | TechCrunch Japan

今週の記事ランキング(2020.5.31〜6.4) | TechCrunch Japan

視線追跡できるVR HMD「VIVE Pro Eye」とスタンドアロンの「Focus Plus」、一般向けに発売

スマートスピーカー開発キットが登場 小型開発モジュール「M5Stack」がベース

OASでLambda AuthorizerをREST APIにimportする | Developers.IO

OASでLambda AuthorizerをREST ...

DevelopersIO / 15時間前


[アップデート] Config の適合パックに「NIST CSF 運用のベストプラクティス」が追加されました | Developers.IO

Zoom面接のプロが教える「採用のオンライン化」で得られるもの、失われるもの

LINE、「トークスクショ機能」をAndroid版にも実装 長文トークも保存可能

「iPhone SE(第2世代)」用タフネスケースおすすめ3選 アウトドアでも安心【2020年最新版】

改正著作権法が成立 海賊版サイトからのDL違法化へ 21年1月1日に施行

AWS Elemental MediaConvert で 1時間近くかかる変換処理に対して高速トランスコーディング機能を使用したらどのくらい速くなるのか調べてみた | Developers.IO

AWS Elemental MediaConvert ...

DevelopersIO / 16時間前


もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。