【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時にローダーアニメーションを表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら