ボタンは多く使われるUIで、今やCSSだけでいろんな表現ができてしまいます。
そんなボタンに JavaScriptでアニメーションを少し加えてあげると、また違った動きが表現できるので、覚えておくと便利です。
この記事では、「ローディング中」のアニメーションをJavaScriptで作ってみました。
サンプルもあるので、最後までご覧いただけると嬉しいです。
.setTimeout()
JavaScriptの .setTimeout() は、一定時間後に一度だけ特定の処理をおこなうメソッドです。
.setTimeout(処理内容, 時間の指定)時間の指定は「ミリ秒」での記述が必須で、例えば3秒の場合は3000、5秒の場合は5000と入力します。
クリックで形が変わってローディングになるサンプル
早速サンプルです。角丸の「ボタン」をクリックすると、形状が変わって丸い形でくるくるローディングが始まります。
クリックして3秒経過すると、また元の形状に戻ります。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめに設置したい場所にHTMLを記述します。
<button id="spinear">ボタン</button>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
var button = document.getElementById("spinear");
document.getElementById('spinear').addEventListener('click', () => {
button.className = "click";
button.innerHTML = '<span class="circle"></span>';
setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "ボタン"; }, 3000);
});最後に、CSSを記述します。
button#spinear {
width: 280px;
height: 60px;
position: relative;
transition: 0.3s ease-in-out;
}
button#spinear.click {
border-radius: 9999px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
background: #707070;
border: solid 1px #707070;
padding: 0;
pointer-events: none;
}
.circle {
display: block;
width: 34px;
height: 34px;
position: relative;
background: transparent;
box-sizing: border-box;
border-top: 4px solid #f0db40;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-radius: 100%;
animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
100% {transform: rotate(360deg)}
}これで完了です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、単に button タグだけです。この button タグにid名をつけて設置します。
<button id="spinear">ボタン</button>id名を変更する場合、JavaScriptのコードも書き換える必要があるので注意ください。
JavaScript
JavaScriptのコードは、「spinear」のid名を持つ要素がクリックされると発動します。発動した後は、「spinear」のid名を持つボタンに「click」のclass名が付与されてCSSで形状が変わり、その文字列が <span class="circle"></span> に置き換えられます。
var button = document.getElementById("spinear");
document.getElementById('spinear').addEventListener('click', () => {
button.className = "click";
button.innerHTML = '<span class="circle"></span>';
setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "ボタン"; }, 3000);
});そしてタイマーを設定する .setTimeout() で3秒後に、クリック前の状態に戻す記述です。
CSS
CSSは、ボタンとローディング中に表示される要素の2種類です。ローディング中にクルクル回るアニメーションは、@keyframes spin で定義しています。
button#spinear {
width: 280px;
height: 60px;
position: relative;
transition: 0.3s ease-in-out;
}
button#spinear.click {
border-radius: 9999px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
background: #707070;
border: solid 1px #707070;
padding: 0;
pointer-events: none;
}
.circle {
display: block;
width: 34px;
height: 34px;
position: relative;
background: transparent;
box-sizing: border-box;
border-top: 4px solid #f0db40;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-radius: 100%;
animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
100% {transform: rotate(360deg)}
}ローディング中は、ボタンにクリック・タッチを無効化する pointer-events: none; を付与しています。そうすることで、ローディング中の再クリックが行われないようにしています。
さいごに
明確なアニメーションと見た目を大きく変えることで、ユーザーもその状態が比較的分かりやすいと思います。
このようなアニメーションも簡単なJavaScriptとCSSでできるので、是非参考にしてみてください。
