纯css实现loading加载提示（全屏遮罩层）可扩展手机端

/**************PC全屏遮罩层，loading加载提示效果**************/

<!-- html部分 -->
<div class='mask' style="position: fixed; top: 0; left: 0; z-index: 99998;  100%; height: 100%; display: none; opacity: 0.4; overflow:hidden;"></div>
<!-- 提示层 -->
<div class='board' style="position: fixed; top: 50%; left: 50%;  32px;height: 32px; z-index: 99999; display: none;">
    <div><img src="../../images/loading.gif" style=" 32px; height: 32px;"></div>
    <!--<div class='qrcode' style="margin-top:3%; 76%;margin-left:12%;text-align:center">请点击获取验证码</div>
    <div class="heart" style="margin-top:6%"><span style="text-align:center;background:#ED171F;display:block;30.4%;margin:0 auto;font-size:14px;color:#fff;font-weight:700;height:36px;border-radius:12px;line-height:36px;border:1px solid red" id="alertSure">确定</span></div>-->
</div>

/**************手机端全屏遮罩层，loading加载提示效果**************/

<!-- html部分 -->

<div class='mask' style="position: fixed; top: 0; left: 0; z-index: 99998;  100%; height: 100%; display: none; background-color: #f2f2f2;opacity: 0.4; overflow:hidden;"></div>
<!-- 提示层 -->
<div class='board' style="position: fixed; top: 35%; left: 35%;  20%;height: 35%; background: #fff; z-index: 99999; display: none;">
    <div style="text-align: center; margin-top: 25%"><img src="../../images/loading.gif" style=" 32px; height: 32px;"></div>
    <div class='qrcode' style="margin-top:3%; 76%;margin-left:12%;text-align:center">请点击获取验证码</div>
    <div class="heart" style="margin-top:6%"><span style="text-align:center;background:#ED171F;display:block;30.4%;margin:0 auto;font-size:14px;color:#fff;font-weight:700;height:36px;border-radius:12px;line-height:36px;border:1px solid red" id="alertSure">确定</span></div>
</div>

使用方法：
显示：

$('.mask').show();
$('.board').show();

隐藏：

$('.mask').hide();
$('.board').hide();

/**************注**************/

 根据实际情况修改提示层定位