Create loading animation / search animation

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.

Screenshot 2025-05-26 at 7.46.39 PM
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.

Screenshot 2025-05-26 at 7.41.47 PM

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):

Screenshot 2025-05-26 at 7.49.04 PM

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.