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

Hi community!

I would like to display this graphical element: Super Simple Progress Bar on my website.
As I am no developer I just copy/pasted the code snippets to a code block ... unfortunately, this does not work. Would appreciated any advise to get this working!

Cheers,
Judgereini

Hi Tuanphan!

Awesome! Exactly what I've needed. Thank you very much!

Guess it is quicker for you to just prepare the code than explaining me how to do this myself. In case that's true ...

... could you pls. also provide the code for this https://codepen.io/tag3r/pen/wYKwRq

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:

#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

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

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

Tuan, you are awesome!!! 🙌

Thank you so much!!! 🙏

Very much appreciated!!! 😀

If you have any interest in linking your progress bar to a Google Sheet (so that the progress can update to match the sheet), I just wrote up a detailed solution on Stack Overflow:

https://stackoverflow.com/questions/70988857/is-it-possible-to-use-the-information-from-a-single-cell-in-google-sheets-to-aut/78336076#78336076