Logo Loading Screen 2.0 - Circle Style (Preview Guide)

Random

Apr 4

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.1
Requires Business Plan or Higher
Uses Code Injection and CSS Editor

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 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 [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3 (a). Customizable Options - Header Code Injection

These options are available in Header Code Injection.

Show Text or Logo
Custom Text or Logo
Loading Screen Time
Loading Screen Fade Out Speed
Show Only Once or Each Page Load
Show or Hide Loading Circle

Uploading Your Logo: 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 Code Injection option. Learn more

Step 3 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Loading Circle Color
Loading Circle Size
Loading Circle Position (Left or Top)
Loading Circle Spacing (Right and Bottom)
Custom Text Color
Custom Text or Logo Size
Background Color or Blur Effect
Blur Amount (More or Less Blur)
Background Image

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 Custom CSS option.

Plugin Notes

Custom text applies the font family set for the site title in settings.

Troubleshooting (Plugin Not Working)

If custom text is not showing, ensure loaderType option is set to ‘text’.
If custom logo is not showing, ensure loaderType option is set to ‘image’.

Squarespace 7.1

Ghost http://www.ghostplugins.com