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