Ghost Plugins

View Original

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

See this content in the original post

Step 2. Add this code to Custom CSS

See this content in the original post

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