Spinners are loading indicators that can be shown when retrieving data or performing other operations.
We will use a common spinner that Salesforce Lightening users are familiar with – the full documentation can be found here. This spinner is a Lightning component, which means that it cannot be directly used on a CloudPage. My awesome colleague Anna rewrote it into HTML and CSS, so that it can be easily copied and pasted for use on a CloudPage. This way, you can emulate the look and feel of other Salesforce clouds on your CloudPages.
It doesn’t necessarily add any value for external users of your CloudPages, but it can improve the experience of Salesforce Marketing Cloud users who internally use apps created on CloudPages and are familiar with other Salesforce clouds.
Here’s a preview of the spinner we will create in a few easy steps:
Let’s start with adding the CSS for our spinner. You can paste below code anywhere in your existing style-sheet, or create a separate one and link to it in the document head:
Now let’s add our spinner to the CloudPage. We will create an HTML button and add an
onclick event, so that the spinner activates once the user clicks the button:
And finally, let’s add the script with the
Above function will activate the spinner once the button is clicked and it will run indefinitely, which means that it’s appropriate for any use cases where the website gets reloaded or redirected to another one after all operations have been completed.
If you would like to control for how long the spinner is displayed, you can use the
setTimeout method to deactivate the spinner after a given time. Below script will hide the spinner after 5 seconds:
You can also control the activation/deactivation of the spinner by adding a
hideSpinner() function to other functions used for performing operations. Below example will post data to another website using the
fetch method and hide the spinner after the operation is complete:
Leave a comment below or email me at firstname.lastname@example.org.