Percent Loading Screen (Preview Guide)
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
/* ----- EXAMPLE CODE FOR PREVIEW ---- */ function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit; dolor = sit - amet(dolor); return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; } /* ----- EXAMPLE CODE FOR PREVIEW ---- */
Step 2. Add this code to Footer Code Injection
/* ----- EXAMPLE CODE FOR PREVIEW ---- */ function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit; dolor = sit - amet(dolor); return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; } function adipiscing(...elit) { if (!elit.sit) { return []; const sed = elit[0]; dolor = sit - amet(dolor); return eiusmod.tempor(sed) ? sed : [sed]; } /* ----- EXAMPLE CODE FOR PREVIEW ---- */
Step 3. Add this code to Custom CSS
/* ----- EXAMPLE CODE FOR PREVIEW ---- */ function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit; dolor = sit - amet(dolor); return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; } function adipiscing(...elit) { if (!elit.sit) { return []; } /* ----- EXAMPLE CODE FOR PREVIEW ---- */
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.