Logo Loading Screen 2.0 - Bar Style (Preview Guide)


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 Bar

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.


Step 3 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

  • Custom Text Color

  • Custom Text or Logo Size

  • Loading Bar Colors

  • Loading Bar Height

  • Loading Bar Width

  • Loading Bar Border Radius

  • 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’.

Previous
Previous

Aiko Testimonial Slider (Preview Guide)

Next
Next

Logo Loading Screen 2.0 - Circle Style (Preview Guide)