Guide
Edit and customize the logo loading plugin.
This template includes a logo loading screen plugin that can be customize with select options.
Important: You must join a Squarespace plan that allows access to Code Injection to use the logo loading plugin.
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 > Advanced > 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 HERE', // text shown next to loading circle loaderImage: 'IMAGE URL HERE', // logo image shown next to loading circle loaderAdditionalDelay: 3000, // 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: #265cff; @ghost-load-loader-size: 40px; @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: #0b2471; @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 ---- */
Go Super
Super Plugins Library.
Customize your template even more with our library of premium Super Plugins for Squarespace.