Jump to content

Display graphical element (super simple progress bar) on squarespace site

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add a Code Block > Paste this code

<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>
<style>
  .progress {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  // on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;
        
        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
    }
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuan!

Another question related to the initial codepen code ... the progress bar:

Is it possible to make the actual value of the progress a variable, where I enter the value on another (hidden page) ... so I can easily change how much progress the bar shows.

So I mean using a variable for this 

data-progress-percent="25"

I'm asking this, because editing the bar and the data surrounding it is now quite cumbersome, as SS displays the embeded code with extra information ... so it looks like a mess 😉

Here's a screenshot:

image.thumb.png.715554f7f3c7779855bb38566b38bb8d.png

 

Link to comment

#1. Sometimes CodePen uses a variation of CSS, and uses some external library, so there is no one-size-fits-all guide to Codepen.

For example, this CodePen uses LESS, it won't work, you will need to convert it to CSS

image.png.100edaf15a46468c02f06f924b7bc7e1.png

Sometime it has some class names, can conflict with Squarespace and we need to remove it before adding to SS

image.png.90ad8f356fce2fc19c4ffd79989f2c3a.png

Add this code into Code Block

<div id="timer"></div>
<style>
  }
#timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
}
#timer div {
  display: inline-block;
  min-width: 90px;
}
#timer div span {
  color: #B1CDF1;
  display: block;
  font-size: 0.35em;
  font-weight: 400;
}

</style>
<script>
  function updateTimer() {
  future  = Date.parse("June 11, 2020 11:30:00");
  now     = new Date();
  diff    = future - now;

  days  = Math.floor( diff / (1000*60*60*24) );
  hours = Math.floor( diff / (1000*60*60) );
  mins  = Math.floor( diff / (1000*60) );
  secs  = Math.floor( diff / 1000 );

  d = days;
  h = hours - days  * 24;
  m = mins  - hours * 60;
  s = secs  - mins  * 60;

  document.getElementById("timer")
    .innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>' ;
}
setInterval('updateTimer()', 1000 );

</script>

#2. You can access this link, it will disable Code Block in Edit Mode, then you can edit everything easier

Suppose your site url is: judgereini.squarespace.com

you can access url: judgereini.squarespace.com/config/safe

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.