Super Plugin Info

Greet your visitors with a clean counting up percentage loading screen.

Live Plugin Demo
Works with Squarespace 7.0 and 7.1
Requires Business Plan or Higher
Uses Code Injection and Custom CSS

⏳ Limited Time: Grab this freebie plugin before it goes back to the Super Plugin Library on April 30th.

Step 1. Add this code to Header Code Injection

<!-- Percentage Loading Screen - Ghost -->
<div id="loading-screen"> <div id="loading-progress">0%</div></div>
<!-- Percentage Loading Screen - Ghost -->

Step 2. Add this code to Footer Code Injection

<!-- Percentage Loading Screen - Ghost -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  let percentage = 0;
  const loadingProgress = document.getElementById('loading-progress');
  const timeoutDuration = 25; // Default timeout duration in milliseconds

  function updateProgress() {
    percentage++;
    loadingProgress.textContent = percentage + '%';

    if (percentage < 100) {
      setTimeout(updateProgress, timeoutDuration);
    } else {
      document.getElementById('loading-screen').style.transition = 'opacity 1s';
      document.getElementById('loading-screen').style.opacity = 0;
      setTimeout(() => {
        document.getElementById('loading-screen').style.display = 'none';
      }, 1000);
    }
  }

  updateProgress();
});

</script>
<!-- Percentage Loading Screen - Ghost -->

Step 3. Add this code to Custom CSS

/* ----- GHOST PLUGINS - PERCENTAGE LOADING SCREEN START ---- */

@percent-background-color: #000;
@percent-font-size: 10rem;
@percent-font-color: #fff;
@percent-padding: 0px;

@percent-alignment: center; // left, right, or center
@percentage-position: center; // center, top, or bottom
@percentage-background-image: url(IMAGE-URL-HERE);

// NOTE - The counting up speed can be changed in FOOTER CODE INJECTION

/* ----- DON'T EDIT BELOW THIS LINE - SUPPORT NOT PROVIDED IF EDITING BELOW THIS LINE ----- */

#loading-screen {background-image: @percentage-background-image;background-size: cover;background-position: center;background-repeat: no-repeat;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: @percent-background-color;display: flex;justify-content: @percent-alignment;align-items: @percentage-position;z-index: 9999;padding: @percent-padding;}#loading-progress {font-size: @percent-font-size;color: @percent-font-color;}

/* ----- GHOST PLUGINS - PERCENTAGE LOADING SCREEN START ---- */

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Counting Up Speed

Step 4 (b). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Background Color
Font Size and Color
Percentage Padding
Percentage Alignment
Percentage Position
Background Image (Optional)

Uploading Your Image: Use CSS > Manage Files to upload and generate a file URL link for your image / logo. Then replace IMAGE-URL-HERE with the file URL in the CSS option.

Plugin Notes

If uploaded, the image’s focal point and placement will be middle center.

Percent Loading Screen - Freebie Super