html如何实现加载动画

html如何实现加载动画

在每个项目中都少不了接口的调用，而发请求出去之后都需要一定的时间才能返回数据，大多需要0.5 - 0.8秒，如果后端数据处理不当还有超过一秒的接口，甚至两秒，在这段时间里我们需要向客户表达正在加载而且不能让用户进行其他操作，那么就需要一个加载动画了，下面凡玉就带大家来看看html如何实现加载动画
可能大家没有注意到一点:gif图本身就带有动画效果

如果你真的很需要节省项目空间可以调用线上的gif图
代码如下:

<img src = "http://47.107.107.93/scripts/themes/default/images/grid/loading.gif"/>

但线上的文件是随时可能更改地址的，所以还是建议下载到本地调用，有了加载图片我们就要思考如何让用户无法对页面进行其他操作了
我们可以用一块div占满整个屏幕
html代码:

<div class = "gif">
    <img src = "xxx.gif"/>
</div>

css代码:

.gif
{
    
    
    position:absolute;/*声明绝对定位*/
    left:0;/*在页面最左侧对齐*/
    top:0;/*在页面最上方对齐*/
    height:100vh;/*高度是相对屏幕高度的100%*/
    width:100vw;/*宽度是相对屏幕宽度的100%*/
    z-index:1;/*设置元素优先级为1级*/
    display:none;/*设置元素隐藏*/
    align-items: center;/*让子元素横向居中(声明flex后有效)*/
    justify-content: center;/*让子元素垂直居中(声明flex后有效)*/
    background-color:rgba(0,0,0,0.5);/*设置背景颜色为黑色，并给0.5透明度*/
}
.gif>img/*设置gif下的img元素样式*/
{
    
    
    height:5%;
    width:5%;
}

js代码:

//显示加载动画
$(".gif").css("display","flex");
//调用ajax发送请求
esdpec.framework.core.getJsonResult('common/getalarmtree', function (res) {
    
    
    //请求成功后再次隐藏加载动画
    $(".gif").css("display","none");
})