Show loading indicator

How to use the showLoading API

AlipayJSBridge.call('showLoading', {
  text: 'Loading',
});

Code examples

Show or hide the global loading indicator:

<h1>Click the buttons to see different effects</h1>
<p>Note: On Android, the loading indicator covers the entire interface. Use the system back button to close it.</p>
<a href="javascript:void(0)" class="btn show">Show loading</a>
<a href="javascript:void(0)" class="btn delay">Show loading after 2s delay</a>
<a href="javascript:void(0)" class="btn notext">Spinner without text</a>

<script>
function ready(callback) {
  // If AlipayJSBridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.show').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: 'Loading',
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 3000);
  });

  document.querySelector('.delay').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: 'Loading',
      delay: 2000,
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 5000);
  });

  document.querySelector('.notext').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: ' ',
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 3000);
  });
});
</script>

API reference

AlipayJSBridge.call('showLoading',{
  text, delay
})

Input parameters

Property	Type	Description	Required	Default
text	string	The text content. To display no text, pass a single space.	N	"Loading"
delay	int	The delay in milliseconds before the indicator appears. If hideLoading is called before this time, the indicator is not displayed.	N	0
autoHide	bool	Whether the container automatically hides the loading indicator after the pageFinish event. Set to false to keep the indicator visible. Android only.	N	true
cancelable	bool	Whether the back button closes the loading indicator. Android only.	N	true