loading畫面...
套用Jquery與blockUI物件,
http://malsup.github.io/jquery.blockUI.js
並套用loaders.css
https://connoratherton.com/loaders
<link href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css" rel="stylesheet" type="text/css" />
<link href="https://raw.githubusercontent.com/ConnorAtherton/loaders.css/master/loaders.css" rel="stylesheet" type="text/css" />
<!--引用jQuery BlockUI-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.blockUI({
//套用loaders套件
message: "<div class='ball-pulse'><div></div><div></div><div></div></div> ",
//背景透明
css: { borderWidth: '0px', backgroundColor: 'transparent' },
});
//3秒後解除
setTimeout(function () {
$.unblockUI();
}, 3000);
});//end click
});
</script>
也可下載此ICON並套用
https://fontawesome.com/