ボタンクリック時にスピナーを表示する方法

HTMLとCSSを使用した方法:

HTMLのボタン要素とスピナー要素、およびCSSを使用してスピナーをスタイル付けします。

HTML:

<button id="myButton" onclick="showSpinner()">クリック</button>
<div id="spinner" class="hidden"></div>

CSS:

.hidden {
  display: none;
}
.spinner {
  /* スピナーのスタイルを定義 */
}

JavaScriptを使用して、ボタンクリック時にスピナーを表示および非表示にする関数を作成します。

JavaScript:

function showSpinner() {
  var spinner = document.getElementById('spinner');
  spinner.classList.remove('hidden');

  // スピナーを表示した後、非同期処理や他の作業を開始します

  // 作業が完了したら、以下のコードを使用してスピナーを非表示にします
  // spinner.classList.add('hidden');
}

JavaScriptライブラリを使用した方法:

モダンなフレームワークやライブラリを使用することで、ボタンクリック時にスピナーを表示することができます。例として、ReactとReact Spinnersライブラリを使用した方法を示します。

まず、ReactとReact Spinnersをインストールします。

npm install react react-spinners

Reactコンポーネント内で、ボタンとスピナーをレンダリングする方法を記述します。

import React, { useState } from 'react';
import { css } from '@emotion/react';
import { ClipLoader } from 'react-spinners';
function MyComponent() {
  const [loading, setLoading] = useState(false);
  const override = css`
    display: block;
    margin: 0 auto;
    border-color: red;
  `;
  const handleClick = async () => {
    setLoading(true);
    // 非同期処理や他の作業を開始します
    // 作業が完了したら、以下のコードを使用してスピナーを非表示にします
    // setLoading(false);
  };
  return (
    <div>
      <button onClick={handleClick}>クリック</button>
      <ClipLoader color={'#0000ff'} loading={loading} css={override} size={50} />
    </div>
  );
}
export default MyComponent;

上記の例では、ReactのuseStateフックを使用してloading状態を管理し、ボタンクリック時にloadingをtrueに設定してスピナーを表示します。

以上の方法を使用すると、ボタンクリック時にスピナーを表示することができます。詳細な実装は使用しているフレームワークやライブラリによって異なる場合がありますが、上記の例は一般的なアプローチです。