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.
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>
@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”
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:
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!!
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.