送信ボタンに付けるSVG画像と格闘した

2026年1月29日

送信ボタンに付けるSVG画像と格闘した

お問い合わせフォームの送信ボタンを押した後、数秒間delayがあることに気が付いたので、

二重クリック防止＋今は送信処理中ですよーということをアイコンを使ってアニメーションでまわすことに。

とりあえず<img>として画像表示＋Tailwindでアニメーション

あまり使い慣れていないSVG画像・・・

HTML

        <button type="submit" id="sendBtn" name="sendBtn" class="flex items-center gap-2 mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            <img
                src="../../../images/iconmonstr-reload-lined.svg"
                class="hidden animate-spin"
                id="loadingIcon"
                alt="loading">
            <span id="btnText" class="w-[100px]">送信</span>
        </button>

        <button type="submit" id="sendBtn" name="sendBtn" class="flex items-center gap-2 mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            <img
                src="../../../images/iconmonstr-reload-lined.svg"
                class="hidden animate-spin"
                id="loadingIcon"
                alt="loading">
            <span id="btnText" class="w-[100px]">送信</span>
        </button>

Tailwindcssにあるはずのanimate-spinクラスはまたtailwind.css（仮）に書き込まれないので、

customize.css（仮）に下記を記載した。

CSS

  .animate-spin {
    animation: var(--animate-spin); /* spin 1s linear infinite */

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  }

  .animate-spin {
    animation: var(--animate-spin); /* spin 1s linear infinite */

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  }

おー、回った回った！（上記は画像なので回っていないように見える）

でも、アイコンのサイズが大きすぎて」、「送信」の文字が縦に並んじゃった（汗）

CSSでSVG画像に色を付ける

その前に、アイコンの色を変えようと思う。

「送信」が白なので、アイコンも白に揃えたい。

TailwindcssにはSVG画像用にfillとstrokeが用意されているんだけれども、

どちらも効かなかった（もしかしたら<svg>タグ用なのかも）

調べていたところ、CSSにfilterプロパティをうまく使えば好きな色を表現できるらしい。

でもそんな頭がないので、さらに調べたところ、hex（16進数）の数値を入れれば、

色を作ってくれる素敵なサイトを発見

CSS filter generator to convert from black to target hex color

Code Penが画面の大部分を占めていて見づらいけれど、画面下部にあります。

白が欲しいので、「#ffffff」を入力して得られたスタイルをCSSに貼り付けるだけ。

CSS

#loadingIcon {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(102%) contrast(101%);
}

#loadingIcon {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(102%) contrast(101%);
}

おー変わった変わった。

ありがとうございます、少し疑っていてすまんかった（汗）

SVG画像の大きさを変えて、「送信」の文字を横並びにする

「送信」の文字が縦に並んでしまう問題を解決しよう。

クラスに「w-〇〇」、「ｗ-[〇〇px]」を入れても効かない。

なので、Dev-Toolでアイコンの大きさを確認したら、約30px×30px。

これを20px×20pxにしてみたら、ちょうどいい感じだったので、これをCSSに書くことに。

CSS

#loadingIcon {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(102%) contrast(101%);
  height: 20px;
  width: 20px;
}

#loadingIcon {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(102%) contrast(101%);
  height: 20px;
  width: 20px;
}

ちょうどいい感じで表示できました！

送信ボタンが押されたときだけアイコンを表示する

最後に送信ボタンが押された時にだけアイコンを表示させる。

それに加えて、

送信ボタンをdisabledにして押させないようにする
カーソルを変えて押せないことを表示する
「送信」→「送信中…」に文字を変える

を同時に行って、最後の仕上げをする。

全部JavaScriptで行います。

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('contact');
  const btn  = document.getElementById('sendBtn');
  const icon = document.getElementById('loadingIcon');
  const text = document.getElementById('btnText');

  form.addEventListener('submit', function () {
    icon.classList.remove('hidden'); /* アイコンを表示 */
    btn.disabled = true; /* ボタンを押せないようにする */
    btn.classList.add('cursor-not-allowed'); /* カーソル変更 */
    text.textContent = '送信中...'; /* ボタン上の文字を変更 */
  });
});

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('contact');
  const btn  = document.getElementById('sendBtn');
  const icon = document.getElementById('loadingIcon');
  const text = document.getElementById('btnText');

  form.addEventListener('submit', function () {
    icon.classList.remove('hidden'); /* アイコンを表示 */
    btn.disabled = true; /* ボタンを押せないようにする */
    btn.classList.add('cursor-not-allowed'); /* カーソル変更 */
    text.textContent = '送信中...'; /* ボタン上の文字を変更 */
  });
});