JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.setTimeout()ボタンをクリックすると形が変わってローディング

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.setTimeout()

JavaScriptの.setTimeout()ボタンをクリックすると形が変わってローディング

JavaScriptの.setTimeout()ボタンをクリックすると形が変わってローディング

ボタンは多く使われるUIで、今やCSSだけでいろんな表現ができてしまいます。

そんなボタンに JavaScriptでアニメーションを少し加えてあげると、また違った動きが表現できるので、覚えておくと便利です。

この記事では、「ローディング中」のアニメーションをJavaScriptで作ってみました。

サンプルもあるので、最後までご覧いただけると嬉しいです。

.setTimeout()

JavaScriptの .setTimeout() は、一定時間後に一度だけ特定の処理をおこなうメソッドです。

.setTimeout(処理内容, 時間の指定)

時間の指定は「ミリ秒」での記述が必須で、例えば3秒の場合は3000、5秒の場合は5000と入力します。

クリックで形が変わってローディングになるサンプル

早速サンプルです。角丸の「ボタン」をクリックすると、形状が変わって丸い形でくるくるローディングが始まります。

かかかず
かかかず

クリックして3秒経過すると、また元の形状に戻ります。

実装の手順と方法

手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

はじめに設置したい場所にHTMLを記述します。

<button id="spinear">ボタン</button>
JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

var button = document.getElementById("spinear");
document.getElementById('spinear').addEventListener('click', () => {
  button.className = "click";
  button.innerHTML = '<span class="circle"></span>';
  setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "ボタン"; }, 3000);
});
CSSを記述

最後に、CSSを記述します。

button#spinear {
    width: 280px;
    height: 60px;
    position: relative;
    transition: 0.3s ease-in-out;
}

button#spinear.click {
    border-radius: 9999px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #707070;
    border: solid 1px #707070;
    padding: 0;
    pointer-events: none;
}

.circle {
  display: block;
  width: 34px;
  height: 34px;
  position: relative;
  background: transparent;
  box-sizing: border-box;
  border-top: 4px solid #f0db40;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 100%;
  animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
  100% {transform: rotate(360deg)}
}
かかかず
かかかず

これで完了です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、単に button タグだけです。この button タグにid名をつけて設置します。

<button id="spinear">ボタン</button>
かかかず
かかかず

id名を変更する場合、JavaScriptのコードも書き換える必要があるので注意ください。

JavaScript

JavaScriptのコードは、「spinear」のid名を持つ要素がクリックされると発動します。発動した後は、「spinear」のid名を持つボタンに「click」のclass名が付与されてCSSで形状が変わり、その文字列が <span class="circle"></span> に置き換えられます。

var button = document.getElementById("spinear");
document.getElementById('spinear').addEventListener('click', () => {
  button.className = "click";
  button.innerHTML = '<span class="circle"></span>';
  setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "ボタン"; }, 3000);
});

そしてタイマーを設定する .setTimeout() で3秒後に、クリック前の状態に戻す記述です。

CSS

CSSは、ボタンとローディング中に表示される要素の2種類です。ローディング中にクルクル回るアニメーションは、@keyframes spin で定義しています。

button#spinear {
    width: 280px;
    height: 60px;
    position: relative;
    transition: 0.3s ease-in-out;
}

button#spinear.click {
    border-radius: 9999px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #707070;
    border: solid 1px #707070;
    padding: 0;
    pointer-events: none;
}

.circle {
  display: block;
  width: 34px;
  height: 34px;
  position: relative;
  background: transparent;
  box-sizing: border-box;
  border-top: 4px solid #f0db40;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 100%;
  animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
  100% {transform: rotate(360deg)}
}

ローディング中は、ボタンにクリック・タッチを無効化する pointer-events: none; を付与しています。そうすることで、ローディング中の再クリックが行われないようにしています。

さいごに

先生

明確なアニメーションと見た目を大きく変えることで、ユーザーもその状態が比較的分かりやすいと思います。

このようなアニメーションも簡単なJavaScriptとCSSでできるので、是非参考にしてみてください。