A form loader (spinner) is a used to indicate that a form is in the process of loading, submitting or processing data. It is used to provide visual feedback to users that their action (such as submitting a form) has been initiated, and that WS Form is working on processing the request.
WS Form supports a variety of customizable built-in loaders as well as being able to implement your own loader HTML.
WS Form makes adding a loader icon to your form easy.
The following built-in loader styles are available:
Rotate 25 Gap
Rotate 25 Accent
Rotate Dots Tail
Circle Dots Pulse
Horizontal Dots Pulse
Horizontal Dots Accent
How to Enable the Loader
To enable the WS Form loader:
- Click the Form Settings icon at the top of the layout editor.
- Click the Loader tab.
- Check the Enabled setting.
- Click Save.
Customizing the Loader
The loader can be fully customized using the settings in the Loader tab. The loader settings are as follows:
Choose from the following types:
- None – No sprite will be rendered, only the overlay will be shown.
- Rotate 25 Gap
- Rotate 25 Accent
- Rotate Grow
- Rotate Dots
- Rotate Dots Tail
- Circle Dots
- Circle Dots Pulse
- Horizontal Dots Pulse
- Horizontal Dots Accent
- Custom HTML – Use your own custom HTML for the sprite.
The approximate size of the sprite. Note that due to how CSS loaders are rendered in the browser this may not be pixel perfect.
Choose the color for the sprite.
Choose the opacity for the sprite (0 = Transparent, 1 = Solid).
If the sprite type chosen supports an accent color (e.g. Rotate 25 Color), choose the color for the accent.
If the sprite type chosen supports an accent color (e.g. Rotate 25 Color), choose the opacity for the sprite (0 = Transparent, 1 = Solid).
If the sprite type chosen utilizes a border width CSS attribute, choose the border width in pixels.
If you choose the Custom HTML option then an HTML editor will appear allowing you enter any custom HTML you wish for your sprite.
You can find a sample of other loader sprites in the cssloaders github repo.
We recommend adding any associated CSS to your theme as opposed to the Custom HTML setting.
Text can optionally be displayed below the sprite. Note that the text will always be present in the DOM for accessibility purposes.
If checked, the text will be displayed beneath the sprite.
Text shown below the sprite.
When the loader is shown, an overlay is rendered over the top of the form. This is intended to fade out the form and indicate to the user that form processing is in progress.
Choose the color for the overlay.
Choose the opacity for the overlay (0 = Transparent, 1 = Solid).
You also choose a cursor to show when the mouse pointer hovers over the overlay.
This is the total time in seconds one cycle of the sprite animation should take. The higher this value, the slower the sprite will animate.
This is the total amount of time it should take for the animation to fade-in. Set to 0 for no fade-in.
This is the total amount of time it should take for the animation to fade-out. Set to 0 for no fade-out.
Use the events settings to determine when the loader should appear.
If checked, the loader will appear with the form is submitted. Use the slider beneath this setting if you would like to delay showing the loader.
If checked, the loader will appear with the form is saved. Use the slider beneath this setting if you would like to delay showing the loader.
If checked, the loader will appear when an action is run using conditional logic. Use the slider beneath this setting if you would like to delay showing the loader.