JSAPI

Since 8.0

showLoading

Show global loading spinner.

Usage

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

Example

Show or display global loading spinner

<h1>Please press the following buttons</h1>
<p>Please press back button to exit in Android platform</p>
<a href="javascript:void(0)" class="btn show">Show loading</a>
<a href="javascript:void(0)" class="btn delay">Display loading in 2 seconds</a>
<a href="javascript:void(0)" class="btn notext">Display spinner without text</a>

<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` 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

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

Input Parameters

NameTypeDescriptionMandatoryDefault
textstringText for the spinner, please use a space character for empty textN‘Loading’
delayintDelay in milliseconds, no spinner will be shown if hideLoading is called right before itN0
autoHideboolAndroid only. Whether or not to automatically dismiss spinner at pageFinishNtrue
cancelableboolAndroid only. Whether or not to dismiss spinner when back button is pressedNtrue

Remarks

  • showLoading and hideLoading must be used in the same current window, you can not show or dismiss the spinner in previous windows