How to Replace the Standard Screen Flow Spinner with a Custom Spinner
This article demonstrates a clever workaround to replace Salesforce's standard Screen Flow spinner with a custom spinner or image by applying CSS via a custom label on Lightning pages. It addresses the user experience limitation for customer-facing flows where the standard spinner may feel generic or unbranded. By uploading a GIF to Static Resources, creating a custom label with CSS, and embedding it in a Lightning page, teams can enhance the loading visuals for flows performing complex logic or callouts. This technique is practical for admins and developers looking to improve flow branding without native customization options.
- Upload a custom GIF spinner to Static Resources for loading visuals.
- Create a custom label that applies CSS to replace the standard spinner.
- Add a Rich Text component with the custom label to the Lightning page.
- Understand the customization applies to all flows on the page and requires page refresh to reset.
- This method enhances user experience though it is a workaround, not an official feature.
In Screen Flows, users often see the standard Salesforce spinner between screens or while the flow is processing. In many cases, it appears only for a moment. However, it becomes much more noticeable when the flow performs heavier work, such as creating or updating multiple records, running complex logic, or making an HTTP callout. While the standard spinner does the job, it may not always provide the best experience. Especially in customer-facing flows where branding and user experience matter more. Salesforce doesn't provide a direct option to customize this spinner. However, with a simple trick, you can replace the standard Flow spinner with your own custom spinner. Using Custom Label to Apply CSS to Lightning Pages As mentioned in this post , when you add a custom label that contains HTML code to a Lightning page, Salesforce renders the code. Using the same idea, you can also apply CSS through a custom label.