In this article, we explain how you can manually create an individual loading animation using the HTML question type.
In some cases, it may be useful to show the user a search animation that suggests searching for suitable providers / service providers.
The HTML content question in Funnelforms is suitable for creating a corresponding search animation. In this short guide, we explain how to create such a loading animation for you.
First create an HTML content question with a suitable question title.
Then copy the following HTML code into the HTML content field (insert your HTML content here):
<html lang="en">
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.progress-bar {
position: relative;
width: 100%;
height: 30px;
background-color: #f2f2f2;
border-radius: 5px;
}
.progress {
position: absolute;
height: 100%;
background-color: #6A30F5;
border-radius: 5px;
animation: progress-animation 14s;
animation-fill-mode: forwards;
}
@keyframes progress-animation {
from { width: 0%; }
to { width: 100%; }
}
</style>
</head>
<body>
<div class="progress-bar">
<div class="progress"></div>
</div>
<script>
const progressBar = document.querySelector('.progress');
let progress = 0;
const interval = setInterval(() => {
progress++;
progressBar.style.width = `${progress}%`;
if (progress === 100) {
clearInterval(interval);
}
}, 53); // Adjusted interval to keep the animation smooth
</script>
</body>
</html>
Use this HTML code to insert a progress bar.
You can now edit the following parameters:
-The background color of the progress bar (default light gray) -replace the desired color as a HEX color code of #f2f2f2:
.progress-bar {
position: relative;
width: 100%;
height: 30px;
background-color: #f2f2f2;
border-radius: 5px;
}
-The color of the progress bar (default purple) - replace the desired color as HEX color code of #6A30F5:
.progress {
position: absolute;
height: 100%;
background-color: #6A30F5;
border-radius: 5px;
animation: progress-animation 14s;
animation-fill-mode: forwards;
}
-The duration of the animation (default 14 seconds - replace the value with 14s:
.progress {
position: absolute;
height: 100%;
background-color: #6A30F5;
border-radius: 5px;
animation: progress-animation 14s;
animation-fill-mode: forwards;
}
-The waiting time (in milliseconds) until the next automatic step (this value should always be one second longer than the duration of the animation, i.e. 15 seconds in our example):
To finish, click on the “Save” button in the top right-hand corner of the page. A message appears: “Save successful”. If errors occur or entries are missing, an error message will appear.