Category: Widgets
Subcategory: Display widgets


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

Built using react-spinners by David Hu 


Demo urlhttps://widgettesting105-sandbox.mxapps.io/p/spinner


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

Built using react-spinners by David Hu


  • 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...)


  • 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.


Spinner Settings

  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 hid 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.

Demo project


Issues, suggestions and feature requests

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

Development and contribution

Benjamin Griggs


Version: 1.0.0
Framework Version: 9.0.5
Release Notes: Initial Release