Loading Spinner

Demo

HTML Code

				
					
<body>
   <!-- Loading Spinner Overlay -->
  <div class="overlay" aria-hidden="true" tabindex="-1">
    <div class="spinner" role="alert">
      <div class="spinner-text">Now Loading...</div>
      <div class="spinner-icon"></div>
    </div>
  </div>

  <!-- Load Content Button -->
  <button id="loadButton">Load Content</button>

  <!-- Content Loaded Section -->
  <div class="content-section" aria-hidden="true" tabindex="-1">
    <h2>Content Loaded</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <button id="resetButton">Reset Page</button>
  </div>
</body>

CSS Code

				
					
/* Base Styles */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0; /* Light background color */
}

button {
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  background-color: #005E86; /* Button color */
  color: #fff; /* Text color */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2980b9; /* Darker color on hover */
}

/* Overlay and Spinner Styles */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.spinner-icon {
  width: 50px;
  height: 50px;
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.spinner-text {
  font-weight: bold;
  text-align: center;
  color: #333;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Content Section Styles */
.content-section {
  display: none; /* Hide the content section initially */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 600px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.content-section h2 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}

.content-section p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

JavaScript Code

				
					
const loadButton = document.getElementById('loadButton');
const resetButton = document.getElementById('resetButton');
const overlay = document.querySelector('.overlay');
const contentSection = document.querySelector('.content-section');

function showLoadingSpinner() {
  overlay.style.display = 'flex';
  overlay.setAttribute('aria-hidden', 'false');
  contentSection.style.display = 'none'; // Hide content section
  document.body.style.overflow = 'hidden'; // Disable scrolling when overlay is displayed

  setTimeout(() => {
    hideLoadingSpinner();
  }, 5000); // Adjust the time (in milliseconds) for how long the loading spinner should display
}

function hideLoadingSpinner() {
  overlay.style.display = 'none';
  overlay.setAttribute('aria-hidden', 'true');
  contentSection.style.display = 'block'; // Show content section after loading
  contentSection.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'auto'; // Enable scrolling after hiding overlay
}

loadButton.addEventListener('click', () => {
  showLoadingSpinner(); // Trigger loading sequence when the button is clicked
  loadButton.style.display = 'none'; // Hide the button after it's clicked
});

resetButton.addEventListener('click', () => {
  contentSection.style.display = 'none'; // Hide the content section
  loadButton.style.display = 'block'; // Show the load button again
});

Why use a loading spinner?

Loading spinners are integral in web development as they serve as visual indicators, signaling to users that content is being fetched or processes are underway. Beyond their aesthetic appeal, loading spinners significantly contribute to user experience by managing expectations and providing feedback during waiting periods. This becomes particularly crucial in web accessibility, where users with various abilities might need additional time for content to load. Spinners offer essential visual cues, aiding users who rely on screen readers or have cognitive impairments, ensuring they understand when content is being retrieved or actions are in progress. Incorporating loading spinners aligns with inclusive design practices, promoting a more accessible and user-friendly web environment for all individuals, regardless of their browsing conditions or abilities.

What are some accessibility concerns?

Visibility and Contrast:
- Concern: Low contrast or insufficient visibility of the spinner against the background may hinder users with visual impairments from perceiving it.
- Mitigation: Ensure sufficient color contrast between the spinner and its background. Use animated or contrasting colors that adhere to WCAG guidelines for readability and visibility.
Semantics and Screen Readers:
- Concern: Screen readers may not convey the presence or purpose of loading spinners, leaving users unaware of ongoing processes.
- Mitigation: Include descriptive alt text or ARIA attributes to provide context for the spinner, allowing screen readers to announce the loading state. Use ARIA live regions to announce updates when the spinner’s state changes.
Keyboard Focus and Interaction:
- Concern: Keyboard users might encounter issues if the spinner receives focus or disrupts the tab order, affecting their navigation.
- Mitigation: Ensure that loading spinners do not receive focus, are not included in the tab order (using tabindex=”-1″), and do not interrupt keyboard navigation or control flow.
Motion Sensitivities and Animation:
- Concern: Rapid, repetitive, or distracting spinner animations might trigger discomfort for users with motion sensitivities or vestibular disorders.
- Mitigation: Provide an option to pause, slow down, or disable spinner animations, allowing users to adjust settings according to their comfort. Avoid overly rapid or continuous animations.
Context and Timing:
- Concern: Users may not understand the context or reason for the spinner, leading to confusion or frustration.
- Mitigation: Accompany the spinner with clear textual cues or messages that indicate the ongoing process or loading status. Provide additional context or instructions when necessary.
Responsive Design and Scaling:
- Concern: Spinners might not scale appropriately on various screen sizes or devices, impacting usability.
- Mitigation: Ensure the spinner design is responsive and scalable across different viewports and devices to maintain its visibility and functionality.