Logo Loading Plugin (Guide)

This template includes a logo loading screen plugin that can be customize with select options. This plugin is pre-installed, see below.

IMPORTANT: You must join a Squarespace plan that allows access to Code Injection to use the logo loading plugin when going live.

Header Code Injection

You can customize the plugin with the following options found 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

Go to Settings > Developer Tools > Code Injection

TIP: Upload your image (logo) to Custom CSS to generate a file URL link. Learn more

<!-- Logo Loading Screen (Circle Style) Ghost -->
<link rel="stylesheet" href="https://www.ghostplugins.dev/assets/loader/style.css">

<div class="preloaded"><div class="logo-animation"><svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" stroke="#fff"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg><h2 class='header-title-text'></h2></div></div> 

<script>
    var ghostLoaderOptions = {
    loaderType: 'text', // available options: 'title' for text or 'image' for logo
    loaderTitle: 'CUSTOM TEXT', // text shown next to loading circle
    loaderImage: 'IMAGE URL HERE', // logo image shown next to loading circle
    loaderAdditionalDelay: 2000, // loading screen time
    loaderFadeTime: 1000, // loading screen fade out speed
    showLoaderOnlyOnce: false, // show loading screen only once, options: true or false
    removeLoadingCircle: false // hide loading circle, options: true or false
  }
</script>

<script src="https://www.ghostplugins.dev/assets/loader/index.js"></script>
<!-- Logo Loading Screen (Circle Style) Ghost -->

Custom CSS

You can customize the plugin with the following options found 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)

Go to Design > Custom CSS

/* ---- GHOST PLUGINS - LOGO LOADING SCREEN (CIRCLE STYLE) START ---- */

@ghost-load-loader-color: #fff;
@ghost-load-loader-size: 35px;

@ghost-load-position: inherit; // use inherit for loading circle on left or block for on top
@ghost-load-loader-right-spacing: 15px;
@ghost-load-loader-bottom-spacing: 0px;

@ghost-load-title-color: #fff;
@ghost-load-branding-size: 25px;

@ghost-load-background-blur: 50px;
@ghost-load-background-color: rgba(255,255,255, 0); // use hex code for solid colors or rgba(255,255,255, 0) for blur effect

/* ----- DON'T EDIT BELOW THIS LINE - SUPPORT NOT PROVIDED IF EDITING BELOW THIS LINE ----- */

body{.preloaded {background-color: @ghost-load-background-color;-webkit-backdrop-filter: blur(@ghost-load-background-blur);backdrop-filter: blur(@ghost-load-background-blur);.logo-animation{h2{color: @ghost-load-title-color;font-size: @ghost-load-branding-size;img{max-height: @ghost-load-branding-size;}}svg{stroke: @ghost-load-loader-color;width: @ghost-load-loader-size;height: @ghost-load-loader-size;}}}} .preloaded .logo-animation { display: @ghost-load-position !important; text-align: center !important; } .preloaded .logo-animation svg { margin-right: @ghost-load-loader-right-spacing !important; margin-bottom: @ghost-load-loader-bottom-spacing !important; }

/* ---- GHOST PLUGINS - LOGO LOADING SCREEN (CIRCLE STYLE) END ---- */

Get more plugins.

Customize your template even more with our library of Free Plugins and Premium Plugins for Squarespace. Use code BOO for 10% off.

ghostplugins.com