Webアプリでモーダルな「クルクル回る」ローダーの表示をCSSで記述する方法

October 01, 2024

Webアプリの開発で、サーバー側が処理している間「クルクル回る」ローダーを画面に表示したい！と思うことがあると思います。 UIを含むWebフレームワークで対応している場合もありますが、簡単に導入できなかったり、画像データなどを用意するのも面倒だったりしますよね。そこで、手軽にCSSだけでモーダルなローダーを実装する方法をご紹介します。

ローダーの表現方法も、いろんな種類があると思いますが、シンプルな「スピナー」タイプを作成してみました。こちらをクリックすると別ウィンドウで実際のサンプル画面が表示されます。

CSS側での記述

/* Spinner */
 #overlay {
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background: #ffffff;
	opacity: 0.7;
	z-index: 2;
	display: none;
	text-align:center;
}
.spinner {
    margin-top: 450px;
    padding-top: 15px;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    background: #666666;
}
.spinner .circle {
    margin: auto;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 5px solid #dddddd;
    border-right-color: transparent;
    animation: spin 1s infinite linear;
}
 @keyframes spin {
    0% { transform: rotate(0deg); opacity: 0.6; }
    50%  { transform: rotate(180deg); opacity: 1; }
    100%   { transform: rotate(360deg); opacity: 0.6; }
}

「circle」要素の「animation」プロパティで、アニメーションの基本動作を指定しています。動作名称「spin」を「1s（1秒間隔）」で「infinite（無限）」に「直線的（linear）」にといった具合です。

「spin」の詳細は、「@keyframes」で指定しています。「0～50%」の間は透明度が「1～0.6」に変化しながら「180deg（度）」右に回転します。「50～100%」の間は透明度が「0.6～1」に変化しながら「360deg（度）」右に回転します。

HTML側での記述

「overlay」要素は、スピナーを表示する際に画面全体をモーダルにするための指定で、デフォルトは非表示としています。背景が白色で半透明にした「overlay」を全画面の最前面に表示し操作をできないようにすることでモーダル化しています。「overlay」はbody要素の最後に記述し、その中に「spinner」と「circle」要素を含めています。

<html>
...
<body>
	...
	<div id='overlay'>
		<div class='spinner'>
			<div class='circle'></div>
		</div>
	</div>
</body>
</html>

Script側での記述

モーダルとローダーの表示と非表示は、下記のスクリプトで切替ています。

const displayLoader = function(display){
	if(display === undefined) display = true;
	if(display){
		document.getElementById("overlay").style.display = "block";
	}
	else{
		document.getElementById("overlay").style.display = "none";
	}
};

参考サイト

最後までお読みいただきありがとうございました！ご意見などございましたらメッセージをお寄せいただけると幸いです。

Web · Script · CSS