KnowHow

技術的なメモを中心にまとめます。
検索にて調べることができます。

シンプルなローダを実装したい。

登録日 ：2024/02/09 06:23
カテゴリ ：python django

flaskでグラフ表示に時間がかかるため、ローダを表示したい。
CSSとJavaScriptを使ってローダを作成した手順のメモです。

まず、ローダのCSSを作成します。

/* Loader styles */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

次に、ローダ表示をコントロールするJavaScriptを作成します。

// ページが完全に読み込まれた後にコンテンツを表示
window.addEventListener('load', function() {
    // ローダーを非表示にする
    document.getElementById('loader').style.display = 'none';
    // コンテンツを表示する
    document.getElementById('content').style.display = 'block';
});

CSSとJavaScriptをstaticフォルダに保管したと仮定して、以下のようにHTMLから参照します。idで指定したloaderとcontentをJavaScriptでdisplay表示(block)・非表示(none)を切り替えます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/bootstrap/favicon.ico">

    <title>Loader Sample</title>
    <!-- CSS for loader -->
    <link href="../static/loader.css" rel="stylesheet">
  </head>

  <body>
    <div id="loader">
      <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
        <div class="loader"></div>
      </div>
    </div>

    <div id="content" style="display: none;">
      <div class="container-fluid">
        <div class="row">
          <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <p> main contents</p>
          </main>
        </div>
      </div>
    </div>

   <!-- JavaScript　for loader -->
   <script src="../static/loader.js"></script>

  </body>

</html>

戻る