Full Page Loader
Load embedded checkouts more smoothly using a fade-in loader!
Loading short pages that contain an inline checkout can sometimes take a second to load up depending on page speed. This can be smoothed by adding a full-page loader that hides the contents of the page until the page AND Spiffy are loaded.
Add this code to your page AFTER your Spiffy.js code:
<div id="pageLoader"><div class="loader-inner"></div></div>
<script>
var hideLoader = function () {
// get the loader element
var loader = document.getElementById('pageLoader')
// hide the loader
loader.classList.add('inactive')
// only run this once!
spiffy.off('form:size', hideLoader)
}
// run once the checkout is ready
spiffy.on('form:size', hideLoader)
</script>
<style>
#pageLoader {
display: flex;
position: fixed;
z-index: 999999;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
background: white;
}
#pageLoader .loader-inner,
#pageLoader .loader-inner:after {
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
}
#pageLoader .loader-inner{
margin: 50px auto 150px;
font-size: 4px;
text-indent: -9999em;
border-top: 1.1em solid rgba(0, 0, 0, 0.1);
border-right: 1.1em solid rgba(0, 0, 0, 0.1);
border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);
border-left: 1.1em solid #8e8e8e;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#pageLoader.inactive {
display: none !important;
}
</style>
Adjusting Loader Hiding
The above code will hide the loader after Spiffy is done loading your checkout, though you can adjust when this triggers by changing the event it triggers on.
Load right when the checkout is loaded (but may still be painting):
spiffy.on('form:ready', hideLoader)
Load right when Spiffy.js is mounted (may be prior to checkouts being loaded):
spiffy.on('form:ready', hideLoader)
Last updated
Was this helpful?