A configurable spinner to be used in conjunction with other widgets.

Built using react-spinners by David Hu and a skeleton loader by Benjamin Griggs

• 20+ different spinner styles to use
• Each spinner can be customized with color, size etc
• Control whether the spinner is visible or not with a Mendix expression
• Can add a caption below the spinner (i.e. Loading Customer...)
• Can add many of the same spinner with a simple integer expression

• The widget does not make other content asynchronous. The widget can only be used with content that is already asynchronous as a means of displaying the loading state to the user.

1. Create a page where you can know if the content is loading or not based on a boolean. Use this boolean in the visibility expression to hide the spinner if the content has finished loading.
2. Select the Type of spinner you'd like to use. See David Hu's original site for each spinner type or check the demo project.
3. Run the project then adjust the Style Details (Color, Size, Width, Height, Radius, Margin) based on your needs. Each value should be a string of an actual CSS value. Use a Hex Code for the color and a measurement for the remaining (15px, 3em, 5rem etc.). Note: The style details that are used depends on the Spinner Type. The widget will only show the used details.

https://widgettesting105-sandbox.mxapps.io/p/spinner

For issues with the Mendix interface: https://github.com/bsgriggs/mendix-spinner/issues

For issues with the Spinners themselves: https://github.com/davidhu2000/react-spinners/issues

Benjamin Griggs