FAQ - How to add a CSS Spinner to a Form during submission?

a practical example of how to use our form submitting class to build better user experience for your forms introduction when you submit a siteglide form , we apply two classes to the \<form> element form submitting form x submitting where x is the id of your form in admin if the form fails validation, both classes will be removed this article explains how you can use this feature as a starting point to build more complex user experiences with your forms, for example, adding a spinner while the form is submitting to give users confidence it is working as expected these code snippets are intended as examples only and are not siteglide features in themselves feel free to use and adapt them in your own sites, but front end code is not covered by our support policy answer in this example, we'll show you how to add an svg spinner icon using svg animation we'll then use the siteglide classes to show the spinner only when needed add html & css this adds an svg spinner within a container that centres the content in this example, we nest the html inside the {% form %} tag (effectively inside the \<form> html tag) so that we can centre the spinner inside the form, however, you could add the spinner wherever you wish note the most important part of this css example is the use of the siteglide form submitting class only when the class is present, we add the styling needed to display and animate the spinner you can of course change the css in any way you like / set the form as position relative so the absolute positioned spinner centres inside it / form form { position relative; } / optional blur the submitting form / / ignored by ie 11 / form form form submitting { filter blur(1px); } / centre the spinner container / form submitting #loadingspinnercontainer { position absolute; width 100%; height 100%; left 0; top 0; display flex; justify content center; align items center; } / hide the spinner by default / \#loadingspinner { opacity 0%; display none; } / while submitting, show the loading spinner and run animation / form submitting #loadingspinner { opacity 100%; display block; width 120px; height 120px; animation name spin; animation iteration count infinite; animation duration 3s; } / define animation / @keyframes spin { from { transform rotate(1deg); } 80% { transform rotate(360deg); } to { transform rotate(360deg); } } {% form %} {% endform %}