squarespace.html

<!-- Add to header -->
<script>
// Increment Toolbox.urlId with each update
window.Toolbox = {
	enable: true,
	evergreen: true,
	url: 'https://develop.beautifultrouble.org/toolbox.js',
	urlId: 2
};
</script>



<!-- Add to page -->
<script>
(() => {
	/* This code expects the following in the site header:

		window.Toolbox = {
			enable: true,
			evergreen: false,
			url: 'https://example.com/toolbox.js',
			urlId: 1
		};

	*/
	if (!(window.Toolbox && window.Toolbox.enable)) return;

	// Attempt to enforce a trailing slash
	try {
		let url = new URL(window.location);
		url.pathname = url.pathname.replace(/([^/])$/, '$1/');
		window.history.replaceState(null, null, url);
	} catch(e) { }

	// Load the script with a fixed or random id to control caching
	let script = document.createElement('script');
	if (window.Toolbox.evergreen) {
		script.setAttribute('src', `${window.Toolbox.url}?id=${Math.random().toString(36).substring(7)}`);
		console.info('Loading toolbox: evergreen');
	} else {
		script.setAttribute('src', `${window.Toolbox.url}?id=${window.Toolbox.urlId}`);
		console.info('Loading toolbox:', window.Toolbox.urlId);
	}
	document.head.appendChild(script);

})();
</script>



<!-- Optional loader -->
<style>
#page :not(.has-background) .section-background {
  background-color: #2b2b2b;
}
.rectangle-bounce {
  position: relative;
  display: flex;
  justify-content: center;
  height: 8rem;
  transition: all 300ms ease-in-out 0s;
  z-index: 1;
  padding: 6rem 0;
}
.rectangle-bounce .rect-1,
.rectangle-bounce .rect-2,
.rectangle-bounce .rect-3,
.rectangle-bounce .rect-4,
.rectangle-bounce .rect-5 {
  width: 1rem;
  margin: 0 2px;
  height: 100%;
  background-color: #49adcd;
  animation: rectangle-bounce 1.5s infinite ease-in-out;
}
.rectangle-bounce .rect-2 {
  background-color: #67bd96;
  animation-delay: -1.4s;
}
.rectangle-bounce .rect-3 {
  background-color: #98be71;
  animation-delay: -1.3s;
}
.rectangle-bounce .rect-4 {
  background-color: #f8ab4f;
  animation-delay: -1.2s;
}
.rectangle-bounce .rect-5 {
  background-color: #f8bf4c;
  animation-delay: -1.1s;
}

@keyframes rectangle-bounce {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
</style>

<div class="rectangle-bounce">
  <div class="rect-1"></div>
  <div class="rect-2"></div>
  <div class="rect-3"></div>
  <div class="rect-4"></div>
  <div class="rect-5"></div>
</div>