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.

1.4.10
Reflow ( level AA ) :
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
2.1.1
Keyboard ( level A ) :
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
2.2.1
Timing Adjustable ( level A ) :
For each time limit that is set by the content, at least one of the following is true:
Turn off: The user is allowed to turn off the time limit before encountering it, or

Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting, or

Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, 'press the space bar'), and the user is allowed to extend the time limit at least ten times, or

Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible, or

Essential Exception: The time limit is essential and extending it would invalidate the activity, or

20 Hour Exception: The time limit is longer than 20 hours.
2.3.1
Three Flashes or Below Threshold ( level A ) :
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
4.1.3
Status Messages ( level AA ) :
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.