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