☰
Trongate MX
Documentation

Help Improve Our Docs

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.

» » »
Success Animations

Success Animations

The mx-animate-success attribute triggers a checkmark animation when an API endpoint returns an HTTP success status code that's in the 'success' range (i.e., 200 - 299).

Demonstration

Click the button below to see an example of a 'success' animation:

How It Works

The mx-animate-success attribute attaches a success animation to elements initiating HTTP requests, such as buttons or forms. When the request succeeds, users see a checkmark animation, giving immediate feedback that the operation was successful.

Example

Here's how you can implement mx-animate-success:

For an HTML-only approach, here's the corresponding code:

Clicking the submit button sends a POST request to endpoint/submit. If the request succeeds (HTTP status 200-299), the checkmark animation is displayed over the form.

Important: The mx-animate-success attribute must be added to the element initiating the HTTP request. Adding it to unrelated elements will not trigger the animation.

Syntax

The syntax for mx-animate-success is simple:

Setting the attribute value to "true" activates the animation.

Placement Rules

The placement of the success animation depends on the context:

  • Default: The animation appears inside the element that contains the mx-animate-success attribute.
  • Modals: If the element that contains the mx-animate-success attribute is inside a modal, the animation will be rendered within the containing modal body - temporarily hiding the entire contents of the modal body.

Tip: Use mx-animate-success alongside mx-post for a seamless combination of server-side operations and client-side feedback.

Advanced Example

Here's a practical example combining mx-animate-success with other MX attributes:

If you'd rather work with pure HTML, here's the code:

In this example:

  1. The form submits data to submit_data via AJAX.
  2. Upon success, a checkmark animation appears within the form.
  3. After a second or two, the animation disappears.
  4. The response text, from the API, is then inserted inside the #response element.

The 'autocomplete' attribute, when set to 'off' on a form's opening tag, prevents the browser from suggesting or automatically filling in previously entered values for any of the form fields. This is especially useful for forms that collect sensitive or unique information, as it ensures the browser won't try to pre-fill fields with stored data.

Things To Keep In Mind

  • The animation is purely client-side and does not confirm server-side changes.
  • It works with clickable elements such as buttons and form elements.
  • For advanced error handling, consider pairing with attributes like mx-redirect-on-error.

Summary

The mx-animate-success attribute provides immediate feedback for successful operations. It can be used with buttons, forms, or modals, and works alongside other Trongate MX attributes to create interactive experiences.

Best Practices:

  • Add mx-animate-success="true" to elements initiating HTTP requests.
  • Combine with mx-post for AJAX-driven forms or buttons.
×