Scroll Progress Bar (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.0 (Brine) and 7.1

  • Requires Business Plan or Higher

  • Uses CSS Editor and Code Injection


Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
  return eiusmod.tempor(sed) ? sed : [sed];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
  return eiusmod.tempor(sed) ? sed : [sed];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. 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 4. Customizable Options

These options are available in Custom CSS.

  • Scroll Bar Height and Color

  • Scroll Bar Position (Top or Bottom)

  • Show or Hide Scroll Bar Text

  • Scroll Bar Text Size, Color, and Offset Position

  • Remove or Change % Character


Plugin Notes

  • You cannot change the direction of the scroll bar.


Troubleshooting (Plugin Not Working)

  • If using 7.0, AJAX loading must be disabled in site styles.

Previous
Previous

Easy Video Lightbox (Preview)

Next
Next

Snappy Page Sections (Preview Guide)