ic-indicator - The Indicator Attribute

Summary

The indicator attribute can be used to show an indicator while a request is in process.

Syntax

The value of the attribute should be a valid selector of the indicator element to show

You can also use the ic-indicator CSS class on elements within an element to specify an indicator.

This attribute may be placed on parent elements, allowing you to specify behavior across multiple elements.

CSS-based Indicators

Normally request indicators are show via the $.show() function. If you wish to use a CSS transition instead, you can add the ic-use-transition class to the indicator instead. If this class is on the indicator, it will be removed while a request is in flight and then readded when the request is over.

Examples

Show/Hide Example

Here is a simple example of an indicator next to a button:

  <button ic-post-to="/target_url" ic-indicator="#indicator">
    Click Me!
  </button>

  <i id="indicator" class="fa fa-spinner fa-spin" style="display:none"></i>

CSS Example

Here is a simple example of an indicator next to a button that uses a CSS transition:

  <button ic-post-to="/target_url" ic-indicator="#indicator">
    Click Me!
  </button>

  <i id="indicator" class="fa fa-spinner fa-spin ic-use-transition"></i>