If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Loading Indicators
Trongate MX makes it incredibly easy to add loading indicators to your web applications. These indicators give users clear feedback that something is happening behind the scenes, improving your application's professionalism and user experience.
Quick Demonstration
Click the button below to see a loading indicator in action:
What Are Loading Indicators?
Loading indicators are temporary visual cues displayed while your application processes requests or fetches data. Trongate MX makes implementing these indicators simple and intuitive.
Getting Started
1. Add a Spinner Element
Trongate comes with a built-in spinner. To create one, add a <div> element with the class spinner. For example:
To make the spinner function as a loading indicator, add the mx-indicator class:
2. Use the mx-indicator Attribute
Assign the mx-indicator attribute to the button (or any element) that triggers the HTTP request. The attribute value should match the CSS selector for your spinner element:
Here's a complete example, using Trongate's form_button() function:
For an HTML-only approach, here's the corresponding code:
During development, use PHP's sleep() function to introduce a delay in your API responses. This gives you time to see how your indicators work:
Note: The spinner class is part of the Trongate CSS library. It works straight out of the box without additional styles or JavaScript.
Custom Loading Indicators
You're not limited to the default spinner. You can create custom indicators using any HTML element:
Here's an example of using a custom loading indicator in a form:
For an HTML-only approach, here's an alternative syntax:
The class blink in Trongate CSS creates a smooth, fading animation that makes the text blink.
Advanced Usage: Multiple Indicators
Need different indicators for different areas of your page? No problem! Assign unique mx-indicator attributes to each button:
Here's how the solution looks when written entirely in HTML:
Summary
Loading indicators are an essential part of any modern web application. With Trongate MX, implementing them is simple, intuitive, and requires no JavaScript. Whether you use the built-in spinner or create custom indicators, you can deliver a polished and professional experience to your users.