Loading Indicator
HTMX has a sophisticated and well considered loading indicator pattern. See their documentation for all of the details. Below are a couple of prebuilt patterns to help you get started.
Adding Indicator To Buttons
One great way to show that progress is to add a loading indicator to the button that triggered the event. Below is a pattern for doing just that.
Notes:
It's best to use a small animated SVG for buttons. Here's one great resource to find one of your liking: SVG Spinners.
Note that the SVG is added directly to the page. We updated the width and height to fit nicely in our button. We also modified the stroke color to be white with a subtle opacity.
Adding Larger Indicators
Want to make more of a statement? Check-out the spinners at Loading.io. These can easily be integrated into your application. Below is a sample of what can be done.
Here's the code for this example.
Last updated