Get started with please-wait CDN

MIT licensed

The Please-Wait library displays a customizable loading spinner or message to indicate that a webpage or application is processing a request.

Tags:
  • PleaseWait.js
  • beautiful splash page
  • loading
  • single page app
  • SPA
  • loading screen
  • spinner

Stable version

Copied!

How to start using please-wait CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with please-wait CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <script src="https://cdn.cdnhub.io/please-wait/0.0.5/please-wait.min.js"></script>
  <style>
    .please-wait {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
    }
  </style>
</head>
<body>
  <button id="load-data">Load Data</button>
  <div id="content"></div>
  <div id="please-wait" class="please-wait">
    <i class="fas fa-spinner fa-pulse fa-3x"></i>
  </div>

  <script>
    const loadDataButton = document.getElementById('load-data');
    const contentDiv = document.getElementById('content');
    const pleaseWaitDiv = document.getElementById('please-wait');

    loadDataButton.addEventListener('click', () => {
      pleaseWaitDiv.style.display = 'flex';
      contentDiv.style.pointerEvents = 'none';

      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => {
          contentDiv.innerHTML = JSON.stringify(data, null, 2);
          pleaseWaitDiv.style.display = 'none';
          contentDiv.style.pointerEvents = 'auto';
        })
        .catch(error => {
          console.error('Error:', error);
          pleaseWaitDiv.style.display = 'none';
          contentDiv.style.pointerEvents = 'auto';
        });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions