ボタンは、ユーザーのタッチポイントになるUIです。
クリック前に「ページが遷移するリンク」や「ダウンロード」など動きが想像できる見た目であることが望ましいですが、クリックした後や最中でも、ユーザーがその動きを理解できれば、さらに良いです。
この記事では、そんな「クリック直後」にローディングを表示させるスニペットを作りました。
簡単なものですが、是非最後までご覧いただけたら嬉しいです。
.setTimeout()
JavaScriptの .setTimeout() は、一定時間後に一度だけ特定の処理をおこなうメソッドです。
.setTimeout(処理内容, 時間の指定)時間の指定は「ミリ秒」での記述が必須で、例えば3秒の場合は3000、5秒の場合は5000と入力します。
ローディング中、表示が変わるサンプル
早速サンプルです。「ローディングボタン」と表記されているボタンをクリックすると、ボタンの背景が薄グレーになりながら、丸いローディング中の円と、表示の文言が「ローディング中」と切り替わります。
切り替わりは3秒で、その時間経過するとまた元の状態に戻ります。
操作によって動きが加わるボタンです。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめにHTMLを記述します。設置したい場所に、HTMLを記述すればOKです。
<button id="baseObject"><span></span>ローディングボタン</button>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
var button = document.getElementById("baseObject");
document.getElementById('baseObject').addEventListener('click', () => {
button.className = "click";
button.innerHTML = "<span></span>ローディング中";
setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "<span></span>ローディングボタン"; }, 3000);
});最後に、CSSを記述します。
button#baseObject {
width: 280px;
position: relative;
transition: 0.3s ease-in-out;
}
button#baseObject.click {
background: #f1f1f1;
color: #707070;
}
/* ローディングアニメーション */
#baseObject span,
#baseObject span:after {
display: none;
border-radius: 9999px;
width: 25px;
height: 25px;
}
button#baseObject.click span,
button#baseObject.click span:after {
display: inline-block;
}
#baseObject span {
position: absolute;
text-indent: -9999em;
border-top: 3px solid rgba(255, 255, 255, 0.4);
border-right: 3px solid rgba(255, 255, 255, 0.4);
border-bottom: 3px solid rgba(255, 255, 255, 0.4);
border-left: 3px solid #313131;
transform: translateZ(0);
animation: loadAnime 3s linear;
vertical-align: middle;
left: 20px;
}
@keyframes loadAnime {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}これで完了です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは簡単な作りで button タグの中に span タグを置いたシンプルな構造です。
<button id="baseObject"><span></span>ローディングボタン</button>これらのタグをJavaScriptとCSSで表示を切り替えていきます。
JavaScript
JavaScriptは「baseObject」のid名を持つ button タグがクリックされることで、その button タグに「click」のclass名が3秒間付与されて表示が切り替わります。
なので、setTimeout() のメソッドは.addEventListener の中に記述していき、クリックで発動するようにします。
var button = document.getElementById("baseObject");
document.getElementById('baseObject').addEventListener('click', () => {
button.className = "click";
button.innerHTML = "<span></span>ローディング中";
setTimeout(function(){ button.className = button.className.replace("click", ""); button.innerHTML = "<span></span>ローディングボタン"; }, 3000);
});クリック後にボタンの中のHTMLを変える為、要素の中身を変更する .innerHTML プロパティを使って、「ローディング中」と表示を変えて、3秒経つとまた元の「ローディングボタン」の表記に変わります。
CSS
CSSは、JavaScriptで付与される「click」で表示が切り替わるように記述します。
button#baseObject {
width: 280px;
position: relative;
transition: 0.3s ease-in-out;
}
button#baseObject.click {
background: #f1f1f1;
color: #707070;
}
/* ローディングアニメーション */
#baseObject span,
#baseObject span:after {
display: none;
border-radius: 9999px;
width: 25px;
height: 25px;
}
button#baseObject.click span,
button#baseObject.click span:after {
display: inline-block;
}
#baseObject span {
position: absolute;
text-indent: -9999em;
border-top: 3px solid rgba(255, 255, 255, 0.4);
border-right: 3px solid rgba(255, 255, 255, 0.4);
border-bottom: 3px solid rgba(255, 255, 255, 0.4);
border-left: 3px solid #313131;
transform: translateZ(0);
animation: loadAnime 3s linear;
vertical-align: middle;
left: 20px;
}
@keyframes loadAnime {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}中でも、くるくる回るアニメーションは @keyframes で作ります。作るアニメーションは「loadAnime」という名前で作って、JavaScriptで「click」のclass名がついた時にアニメーションを動かします。
そのアニメーションは、JavaScriptの .setTimeout() で指定した3秒の秒数に合わせて、CSSでも3秒の「3s」のタイミングに合わせるようにして、一定の速度で始まって終わる linear のタイミングで指定します。
さいごに
リンクでページ遷移するものや、ダウンロードのボタンなど、ボタンが何かのトリガーになることが多いので、表示の引き出しを持っておくと便利です。
是非参考にしてみてください。
