【JavaScript】formのsubmit時にローダーアニメーションを表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでformのsubmit時にローダーアニメーションを表示する方法をご紹介しています。非同期処理のフォームで、送信ボタンをクリックした際に値の検証や送信処理を裏側で実行している間に表示する内容として有効です。

では、解説していきます。

本記事で作成するもの

下記のデモの内容を作成します。フォームの送信ボタンをクリックすると、フォームに重なる形でローダーアニメーションが表示されます。

See the Pen 7449 by ryohei (@intotheprogram) on CodePen.

本記事ではフロントエンドのみのご紹介になりますが、本来は非同期処理のフォームで裏側でバリデーションチェックや送信処理の待機中に表示する内容です。バリデーションチェックでエラーがあればローダーを非表示にしてエラーメッセージを表示し、送信が完了した場合はフォームの表示を削除して送信完了のメッセージを表示するなどの運用を想定しています。

フォームを作成する

デモで使用しているフォームを作成します。input要素2つとbutton要素1つを設置します。ローダーを絶対位置で表示するため、form要素を相対位置とします。

HTML

<form action="">
    <fieldset>
        <label>
            <span>名前</span>
            <input type="text" name="fullname" value="">
        </label>
        <label>
            <span>フリガナ</span>
            <input type="text" name="furigana" value="">
        </label>
    </fieldset>
    <button>送信</button>
</form>

CSS

form {
    position: relative;
    padding: 28px;
}

ローダーアニメーションを作成する

前項で作成したフォームにローダーアニメーションを追加します。一から作成するのではなく、SpinKitとJavaScriptを組み合わせて実装します。詳細は下記記事でご紹介していますので、ご参照いただけますと幸いです。

今回はSpinnerのアイコンを使用してローダーアニメーションを作成します。アニメーションにつきましては好みのものを選択してご使用ください。

ローダーはデフォルトではdisplay: noneで非表示にしておきます。次項で送信ボタンがクリックされた後にJavaScript側でdisplay: blockに変更する処理を作成します。

HTML

<form action="">
    <fieldset>
        <label>
            <span>名前</span>
            <input type="text" name="fullname" value="">
        </label>
        <label>
            <span>フリガナ</span>
            <input type="text" name="furigana" value="">
        </label>
    </fieldset>
    <button>送信</button>

    <div class="loader">
        <div class="loader__spinner">
            <div class="loader__spinner--cube1"></div>
            <div class="loader__spinner--cube2"></div>
        </div>
    </div>
</form>

CSS

@keyframes sk-cubemove {
    25% { 
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% { 
        transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% { 
        transform: translateX(42px) translateY(42px) rotate(-180deg);
    } 75% { 
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    } 100% { 
        transform: rotate(-360deg);
    }
}

.loader {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    
    &__spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 57px;
        height: 57px;
        transform: translate(-50%, -50%);
        
        &--cube1,
        &--cube2 {
            background-color: #ffffff;
            width: 15px;
            height: 15px;
            position: absolute;
            top: 0;
            left: 0;
            animation: sk-cubemove 2s infinite ease-in-out;
        }

        &--cube2 {
            animation-delay: -1s;
        }
    }
}

submit時にローダーアニメーションを表示する

送信ボタンがクリックされた後にローダーアニメーションを表示します。非同期処理については省略していますが、エラーもしくは送信完了で再度ローダーを非表示にする処理を追記いただければと思います。

JavaScript

const myFunc = ()=>{

    const form = document.forms[0];
    const button = form.querySelector('button');
    const loader = form.querySelector('.loader');

    button.addEventListener('click', (e)=>{

        //ローダーを表示する
        loader.style.display = 'block';

        //～
        //非同期処理追加
        //～

    }, false);
};
myFunc();

最後に

本記事の内容は、外部サービスの埋め込みフォームで裏側の処理を待機している間にローダーが表示されるケースがあったので、そちらを参考に作成したものになります。本来は非同期処理で使用するのでもっと複雑になると思いますが、ローダーのみであれば少ない行数で実現できましたので、同じようなフォームを実装したい方の参考になれば幸いです。

以上、JavaScriptでformのsubmit時にローダーアニメーションを表示する方法のご紹介でした！