Loading畫面

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/