Hi all,
I’m wondering if anyone has solved for a loading icon for a file upload? We have some users uploading their own media and it’s a little confusing when the form submit button goes inactive without any indication the media is still loading.
Thank you!
Sure! It’s best illustrated when uploading a larger file, like a video but you can see what I mean here: Bubbles - Teamwork. On your time.
When I go to upload the file, the only indication that it is uploading is the ‘Next’ button going grey. I’m hoping we can find a way to get an uploading spinner or something to indicate that the files are received and are processing/uploading.
Thanks a lot for the details @jelli , so your main goal is to show some kind of spinner or an illustration that lets the user know that the upload is in progress, is the “A logged-in user can only submit once” option enabled on your form? because the submit button gets inactive when that option is toggled on.
By the way you can also show a success message on the form after submission as an indicator of a success message.
Hi @Andranik, yes, that’s right! Some kind of visual representation or spinner that the file is uploading.
In the recording I shared you can see that the submit button does go inactive and I do have a success message that pops up when the form is submitted, but this is not enough visual representation for many of our end users. They are fairly older and need elements clearly represented. The submit button going inactive only further confuses them, actually. So some kind of visual spinner would be a huge help in letting them know that there is an action being taken. They’re already accustomed to a spinner on other applications and technologies so that is what was requested by them here.
Thanks for getting back @jelli I believe that can be achieved with a custom code snippet, such as the following, try to place it inside your page’s custom code header settings and change the blockid in the code’s latest sentences with the form block name.
<div id="loader" class="modal" style="display: none">
<div class="modal-content">
<div class="spinner-container">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<p class="loading-message">Data is being processed, please wait...</p>
</div>
</div>
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
border-radius: 5px;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner-border {
border: 4px solid #1b468b;
border-top: 3px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
.spinner-border span {
display: none;
}
.loading-message {
font-size: 18px;
font-weight: 500;
color: #000000;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
const loader = document.getElementById("loader");
window.addEventListener("submit-form-success-blockid", function () {
loader.style.display = "block";
setTimeout(() => {
loader.style.display = "none";
// Additional actions after processing
}, 3000);
});
</script>
Hi Andranik,
Thank you for providing this! I added to the page but it still hasn’t been showing a spinner. Here is the edited code I used:
<div id="loader" class="modal" style="display: none">
<div class="modal-content">
<div class="spinner-container">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<p class="loading-message">Data is being processed, please wait...</p>
</div>
</div>
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
border-radius: 5px;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner-border {
border: 4px solid #1b468b;
border-top: 3px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
.spinner-border span {
display: none;
}
.loading-message {
font-size: 18px;
font-weight: 500;
color: #000000;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
const loader = document.getElementById("loader");
window.addEventListener("submit-business", function () {
loader.style.display = "block";
setTimeout(() => {
loader.style.display = "none";
// Additional actions after processing
}, 3000);
});
</script>
I also took it upon myself to try specific listeners, though admittedly I may have coded incorrectly. I don’t tout myself as a coder:
<div id="loader" class="modal" style="display: none">
<div class="modal-content">
<div class="spinner-container">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<p class="loading-message">Data is being processed, please wait...</p>
</div>
</div>
<!-- Loader CSS -->
<style>
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 5px;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner-border {
border: 4px solid #1b468b;
border-top: 3px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<!-- Loader JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const loader = document.getElementById("loader");
function showLoader() {
loader.style.display = "block";
}
const photoInput = document.getElementById("photo");
const videoInput = document.getElementById("video");
if (photoInput) {
photoInput.addEventListener("change", function() {
if (this.files.length > 0) {
showLoader();
}
});
}
if (videoInput) {
videoInput.addEventListener("change", function() {
if (this.files.length > 0) {
showLoader();
}
});
}
});
</script>
Neither of these have seemed to get this across the finish line… Any idea as to what the disconnect may be?
@jelli Yes it seems you have an error on the event listener line
window.addEventListener(“submit-form-success-blockid” you need to simply replace the word blockid with your block name but rather you made the line look like this.
window.addEventListener(“submit-business”
Hi Andranik,
This got me onto the right thing! I had to add an element in the as well as the code in the . I was able to get it targeted to just the two elements my searching their accurate names within the console so the spinner loads only when the two fields are changed.
Here are some generic copies of the code i got to work:
(custom code block on page) ```<head> code
If anyone else wants to use them:
Instructions:
* Place the HTML code for the loader in the <body> section of your page.
* Insert the CSS and JavaScript provided above into the <head> section.
* Ensure the IDs used in the JavaScript (submit-business-Photos--1458636903 and submit-business-Video-1066885731) match those of your input fields. If they differ, update the IDs in the script accordingly.
* With these snippets in place, the loading spinner should display when the specified input fields are interacted with, and the text "Loading..." will remain static below the spinning element.
Thank you for your help!!Hi jelli
Thanks for your explanation! I am currently working on the same subject, but I can’t get it to work. I assume that I choose the wrong Event listener.
Here is what I did:
I inserted this code into the header section:
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
border-radius: 5px;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner-border {
border: 4px solid #1b468b;
border-top: 3px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
.spinner-border span {
display: none;
}
.loading-message {
font-size: 18px;
font-weight: 500;
color: #000000;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
const loader = document.getElementById("loader");
window.addEventListener("submit-video-uploads-block1", function () {
loader.style.display = "block";
setTimeout(() => {
loader.style.display = "none";
// Additional actions after processing
}, 3000);
});
</script>
Then I put this code into a custom code block:
<div id="loader" class="modal" style="display: none">
<div class="modal-content">
<div class="spinner-container">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<p class="loading-message">Data is being processed, please wait...</p>
</div>
</div>
The name of the List Block is: video-uploads-block1, I didn’t get where you found those numbers:
It should be visible, when people press Upload Video (Create Record Button)
Can you tell me what mistake I am making?
Thank you!
Hi @Gio,
To get the exact name for the block for the listener, I had to inspect the element on the live page in the console. If you hover over the section you want to get the name for and right click, then go to ‘inspect,’ you should be able to see the id in the elements section. Here is a quick screen record of what I did: Bubbles - Teamwork. On your time.
I hope this helps!