Loading Indicators
Trongate MX provides a simple yet powerful way to display loading indicators during asynchronous operations. This feature enhances user experience by providing visual feedback when content is being loaded or forms are being submitted.
Using the mx-indicator Attribute
The mx-indicator
attribute allows you to specify which element should be shown as a loading indicator during an AJAX request. This attribute can be added to any element that triggers a request.
<button mx-get="api/data"
mx-target="#result"
mx-indicator="#loading">Load Data</button>
<div id="loading" class="spinner mx-indicator" style="display: none"></div>
<div id="result"></div>
In this example, the div with id "loading" will be shown while the request is in progress.
Built-in Spinner
Trongate CSS, which comes with the Trongate framework, includes a built-in spinner class. You can easily create a loading indicator by adding the spinner
class to an element:
<div class="spinner mx-indicator" style="display: none"></div>
This will create a beautiful spinning icon that can be used as a loading indicator.
Custom Indicators
While the built-in spinner is convenient, you're not limited to using it. You can use any element as a loading indicator, including custom HTML, images, or GIFs. Simply apply the necessary classes and reference it in the mx-indicator
attribute:
<button mx-post="api/submit" mx-indicator="#custom-loader">Submit</button>
<div id="custom-loader" class="mx-indicator" style="display: none">
<img src="path/to/your/loader.gif" alt="Loading...">
</div>
How It Works
Trongate MX manages loading indicators through CSS classes:
-
mx-indicator
: Applied to the element when it's actively showing as a loader. -
mx-indicator-hidden
: Applied to hide the loader when it's not active.
The JavaScript functions activateLoader()
and hideLoader()
handle the switching between these classes.
Automatic Management
Trongate MX automatically manages the visibility of loading indicators:
- When a request starts, the indicator is shown by adding the
mx-indicator
class and removingmx-indicator-hidden
. - When a request completes, the indicator is hidden by removing the
mx-indicator
class and addingmx-indicator-hidden
.
- Use meaningful IDs for your loading indicators to make your code more readable.
- Consider using different indicators for different types of operations (e.g., loading data vs. submitting forms).
- Ensure your loading indicators are accessible, including appropriate ARIA attributes if necessary.
- Test your loading indicators with various network conditions to ensure a good user experience.
By effectively using loading indicators, you can significantly improve the perceived performance and user experience of your Trongate MX applications.