How do I add a loading spinner to Squarespace?

Loading Spinner — Squarespace CSS

Squarespace 7.1 doesn't have a built-in page loading spinner. You can add one by injecting a spinner overlay via code injection and hiding it once the page loads with a small JavaScript snippet.

Create a pure CSS spinner using a border animation on a circular element. The overlay covers the entire viewport and fades out once the DOM is ready.

/* Add to Custom CSS */
.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease;
}
.page-loader.loaded { opacity: 0; pointer-events: none; }
.page-loader .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #eee;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Generate this with our Animation GeneratorTry it free →