Customizing the Flow spinner (CSS loader)

The Flow player includes a default spinner that is displayed when the flow is waiting… this is what the spinner looks like in action:

Like with all things Flow, we can customize the spinner, if we like. To do this, we will create a new Flow player based on the default player, and update the code. Let’s get started then!

    1. Create a new Flow player called Spinner based on the default player.
    2.  Okay.. let’s delete the following text from the player HTML code:
      <div class=”wait-spinner”></div>
    3. We will paste this code block in its stead:
    4. This is the code block that makes the spinner spin:

      We can find the code inside the <style></style> tags. Let’s delete this code block.
    5. Paste the following code to replace the above code.
    6. Save the player with the updated code.
    7. We will select the Spinner player when we are running our flow.

      Wait! Is it… a rocket ship!

Needless to say, a rocket ship is just one example! We can customize the spinner to use any icon or animation we like.