给自己网站加上好看的loading加载动画

如何为自己的网站做一个好用的 loading 效果

如下默认的初始动画：

代码

<style>
.isxm-loading {
  width: 30px;
  height: 30px;
  border: 3px solid red;
  border-top-color: transparent;
  border-radius: 50%;
  animation: layui-rotate 1s linear infinite;
}
</style>
<div id="isxm-loading"><div class="isxm-loading"></div></div>

默认动画位置是不对齐的，这时候需要使用到 jquery 了。(虽然纯css也可以，但是要多样化比较好)

jq代码设置如下

 $('#isxm-loading').css({
'position':'fixed',
'z-index':99999999,
'background':'rgba(0, 0, 0,0.1325)',
'top':0,
'bottom':0,
'left':0,
'right':0,
'margin':'auto',
'width':'100%'
});
$("body").css({
"position":"relative",
"z-index":1
});

第一个 $("#isxm-loading") 是动画的容器盒子。用于定位、背景阴影

第二个 $("body")  是设置动画在哪个位置居中。

 

指定卡片加载动画。只需把 position:fixed 改成 position: absolute ，$("body") 中的 body 改成指定的卡片标识即可

 

当然更多的动画效果可以自行添加

这里我推荐一个网址，里面有100种存css动画 看到喜欢的可以复制下来

用CSS做的100个Loading加载动画

 

上一篇：腾讯网

下一篇：一键获取网站favicon图标API代码