Percent Loading Screen - Freebie Super
Super Plugin Info
Greet your visitors with a clean counting up percentage loading screen.
Works with Squarespace 7.0 and 7.1
Requires Business Plan or Higher
Uses Code Injection and Custom CSS
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.