Show global loading spinner.
AlipayJSBridge.call('showLoading', {
text: 'Loading...',
});
<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>
AlipayJSBridge.call('showLoading',{
text, delay
})
Name | Type | Description | Mandatory | Default |
---|---|---|---|---|
text | string | Text for the spinner, please use a space character for empty text | N | ‘Loading’ |
delay | int | Delay in milliseconds, no spinner will be shown if hideLoading is called right before it | N | 0 |
autoHide | bool | Android only. Whether or not to automatically dismiss spinner at pageFinish | N | true |
cancelable | bool | Android only. Whether or not to dismiss spinner when back button is pressed | N | true |
showLoading
and hideLoading
must be used in the same current window, you can not show or dismiss the spinner in previous windows