Want to add a survey loading spinner to your confirmation screen? Here's how you'd do it in Shopify, but the process can be used everywhere else you can add javascript.
To do this, go to your additional scripts section under Settings and add the following code:
<div id="kno-loading-div">
<div class="kno-dual-ring"></div>
<p>We'd love your feedback! Checking for a survey...</p>
</div>
<style>
#kno-loading-div {
display: flex;
align-items: center;
flex-direction: column;
padding: 50px 0px;
}
.kno-dual-ring {
display: inline-block;
width: 60px;
height: 60px;
margin-bottom: 10px
}
.kno-dual-ring:after {
content: " ";
display: block;
width: 44px;
height: 44px;
margin: 8px;
border-radius: 50%;
border: 6px solid #000;
border-color: #000 transparent #000 transparent;
animation: kno-dual-ring 1.2s linear infinite;
}
@keyframes kno-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
/*
* Hide loader
*/
var checkKnoRuns = 0;
var checkKnoSurvey = setInterval(function() {
checkKnoRuns += 1;
var kno_found = document.getElementsByClassName("kno-app");
if (kno_found[0] != null) {
console.log('kno found');
document.getElementById("kno-loading-div").style.display = "none";
clearInterval(checkKnoSurvey);
} else if (checkKnoRuns === 100){
console.log('kno not found');
document.getElementById("kno-loading-div").style.display = "none";
clearInterval(checkKnoSurvey);
}
}, 100); // check every 100ms
</script>
This can be customized however you like (we recommend changing the text at the top).
The final view of it in your Additional Scripts section should look something like this:
