JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.setTimeout()でボタンをクリックするとローディングの表示

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

.setTimeout()

JavaScriptの.setTimeout()でボタンをクリックするとローディングの表示

JavaScriptの.setTimeout()でボタンをクリックするとローディングの表示

ボタンは、ユーザーのタッチポイントになるUIです。

クリック前に「ページが遷移するリンク」や「ダウンロード」など動きが想像できる見た目であることが望ましいですが、クリックした後や最中でも、ユーザーがその動きを理解できれば、さらに良いです。

この記事では、そんな「クリック直後」にローディングを表示させるスニペットを作りました。

簡単なものですが、是非最後までご覧いただけたら嬉しいです。

.setTimeout()

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

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

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

ローディング中、表示が変わるサンプル

早速サンプルです。「ローディングボタン」と表記されているボタンをクリックすると、ボタンの背景が薄グレーになりながら、丸いローディング中の円と、表示の文言が「ローディング中」と切り替わります。

切り替わりは3秒で、その時間経過するとまた元の状態に戻ります。

かかかず
かかかず

操作によって動きが加わるボタンです。

実装の手順と方法

手順と方法

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

HTMLを記述

はじめにHTMLを記述します。設置したい場所に、HTMLを記述すればOKです。

<button id="baseObject"><span></span>ローディングボタン</button>
JavaScriptを記述

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

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

var button = document.getElementById("baseObject");
document.getElementById('baseObject').addEventListener('click', () => {
  button.className = "click";
  button.innerHTML = "<span></span>ローディング中";
  setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "<span></span>ローディングボタン"; }, 3000);
});
CSSを記述

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

button#baseObject {
    width: 280px;
    position: relative;
    transition: 0.3s ease-in-out;
}
button#baseObject.click {
    background: #f1f1f1;
    color: #707070;
}

/* ローディングアニメーション */
#baseObject span,
#baseObject span:after {
  display: none;
  border-radius: 9999px;
  width: 25px;
  height: 25px;
}
button#baseObject.click span,
button#baseObject.click span:after {
  display: inline-block;
}
#baseObject span {
  position: absolute;
  text-indent: -9999em;
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  border-right: 3px solid rgba(255, 255, 255, 0.4);
  border-bottom: 3px solid rgba(255, 255, 255, 0.4);
  border-left: 3px solid #313131;
  transform: translateZ(0);
  animation: loadAnime 3s linear;
  vertical-align: middle;
  left: 20px;
}

@keyframes loadAnime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0;
  }
}
かかかず
かかかず

これで完了です。

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

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

HTML

HTMLは簡単な作りで button タグの中に span タグを置いたシンプルな構造です。

<button id="baseObject"><span></span>ローディングボタン</button>

これらのタグをJavaScriptとCSSで表示を切り替えていきます。

JavaScript

JavaScriptは「baseObject」のid名を持つ button タグがクリックされることで、その button タグに「click」のclass名が3秒間付与されて表示が切り替わります。

なので、setTimeout() のメソッドは.addEventListener の中に記述していき、クリックで発動するようにします。

var button = document.getElementById("baseObject");
document.getElementById('baseObject').addEventListener('click', () => {
  button.className = "click";
  button.innerHTML = "<span></span>ローディング中";
  setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "<span></span>ローディングボタン"; }, 3000);
});

クリック後にボタンの中のHTMLを変える為、要素の中身を変更する .innerHTML プロパティを使って、「ローディング中」と表示を変えて、3秒経つとまた元の「ローディングボタン」の表記に変わります。

CSS

CSSは、JavaScriptで付与される「click」で表示が切り替わるように記述します。

button#baseObject {
    width: 280px;
    position: relative;
    transition: 0.3s ease-in-out;
}
button#baseObject.click {
    background: #f1f1f1;
    color: #707070;
}

/* ローディングアニメーション */
#baseObject span,
#baseObject span:after {
  display: none;
  border-radius: 9999px;
  width: 25px;
  height: 25px;
}
button#baseObject.click span,
button#baseObject.click span:after {
  display: inline-block;
}
#baseObject span {
  position: absolute;
  text-indent: -9999em;
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  border-right: 3px solid rgba(255, 255, 255, 0.4);
  border-bottom: 3px solid rgba(255, 255, 255, 0.4);
  border-left: 3px solid #313131;
  transform: translateZ(0);
  animation: loadAnime 3s linear;
  vertical-align: middle;
  left: 20px;
}

@keyframes loadAnime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0;
  }
}

中でも、くるくる回るアニメーションは @keyframes で作ります。作るアニメーションは「loadAnime」という名前で作って、JavaScriptで「click」のclass名がついた時にアニメーションを動かします。

そのアニメーションは、JavaScriptの .setTimeout() で指定した3秒の秒数に合わせて、CSSでも3秒の「3s」のタイミングに合わせるようにして、一定の速度で始まって終わる linear のタイミングで指定します。

さいごに

先生

リンクでページ遷移するものや、ダウンロードのボタンなど、ボタンが何かのトリガーになることが多いので、表示の引き出しを持っておくと便利です。

是非参考にしてみてください。