簡単なCSSでローディング中画面を表示させる

Posted at 2025-03-25

よくある、ローディング中のグルグル回るあれを表示させたい

#loading-spinnerに対して、基本は<div id="loading-spinner" style="display: none;">にしておいて、読み込み中だけ$('#loading-spinner').show()、終わったら$('#loading-spinner').hide()を呼び出せばローディングになる

loading.html

<html>
    <style>
        #spinner {
            border: 4px solid #eee;
            border-top: 4px solid #333;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <body>
        <div id="loading-spinner">
            <div id="spinner"></div>
        </div>
    </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up