Spinner

Category: Widgets
Subcategory: Display widgets

Overview

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

Built using react-spinners by David Hu 

Documentation

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

Spinner

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

Built using react-spinners by David Hu

Features

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

Limitations

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

Usage

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

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

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

Releases

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