Header Small Ahoy!

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 removing mx-indicator-hidden.
  • When a request completes, the indicator is hidden by removing the mx-indicator class and adding mx-indicator-hidden.

Best Practices

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