ワイズリマインダー

VanillaJSでサクッと動くスピナーを作ってみた

 

Webサイトで読み込み中や処理中に表示する「スピナー」。
今回は、外部ライブラリに頼らず VanillaJSだけ で動作するシンプルなスピナーを作ってみました。

 

ポイント

・依存なし：jQueryやReactなどは不要
・軽量：JavaScriptだけでOK

 

使い方

スピナーのダウンロードや具体的な導入方法は、別ページで詳しくまとめています。

スピナー（メッセージ付き）を表示する

ざっくり手順をまとめるとこんな感じです：

1.スピナーのJSファイルをダウンロード
2.HTMLに読み込む
3.表示したい要素にスピナーを呼び出す

 

こんな場面で便利

・ページロード中のインジケーター
・フォーム送信後の待機表示
・データ取得中のローディング

軽量なので、既存のWebサイトにサッと導入できます。

 

最後に

外部ライブラリを使わずにシンプルなスピナーを実装したい場合、VanillaJSスピナーはとても便利です。
ぜひデモを見て、あなたのサイトでも使ってみてください！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

検索

最近のコメント

最近の投稿

タグ

Android C841M-4X-JSEC/K9 CentOS CentOS7 chrome cisco CKEditor cmd.exe CompositionAPI css F1 F1 2016 F1 2017 F1 2018 F1 2019 F1 2020 F1 2021 F1 2022 F1 2023 F1 2024 GapChart html HTML5 JavaScript jQuery LapChart Linux MySQL php SFC Vue3 Windows Windows10 WordPress イギリスGP イタリアGP オーストリアGP カスタマイズ ギャップチャート データベース トラブルシューティング ハンガリーGP バーレーンGP モナコGP ラップチャート

フィード配信

RSS 2.0
RDF
atom

アーカイブ

外部リンク