前端实现简单的loding效果

1.html部分

 <div id="preloader"><div class="sk-spinner sk-spinner-wave" id="status"><div class="sk-rect1"></div><div class="sk-rect2"></div><div class="sk-rect3"></div><div class="sk-rect4"></div><div class="sk-rect5"></div></div></div>

2.css部分

#preloader {position: fixed;top:0;left:0;right:0;width:100%;height:100%;bottom:0;background-color:#1A80C3; z-index:999999;
}
.sk-spinner-wave.sk-spinner {margin:-15px 0 0 -25px; position:absolute;left:50%; top:50%;width: 50px;height: 30px;text-align: center;font-size: 10px;}
.sk-spinner-wave div {background-color: #fff;height: 100%;width: 6px;display: inline-block;-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.sk-spinner-wave .sk-rect3 {-webkit-animation-delay: -1s;animation-delay: -1s;}
.sk-spinner-wave .sk-rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.sk-spinner-wave .sk-rect5 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;}@-webkit-keyframes sk-waveStretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes sk-waveStretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}

3.js部分；这里使用jquery

     $(document).ready(function () {$('#preloader').show();$('#status').show() });

前端实现简单的loding效果相关推荐

JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果
定位: 绝对定位Absolution: 元素会脱离文档流,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为abs ...
ajax 滚动加载缓存,Ajax实现加载缓存的loding效果
这次给大家带来Ajax实现加载缓存的loding效果,Ajax实现加载缓存loding效果的注意事项有哪些,下面就是实战案例,一起来看一下. Ajax 异步请求的时候,一般都会利用一个动态的 gif小 ...
html网页制作秒表原理,JavaScript怎么实现简单的秒表效果？（代码示例）
JavaScript怎么实现简单的秒表效果?下面本篇文章给大家通过代码示例介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 描述: 实现一个简单的秒表,点击启动按钮时开始计时 ...
HTML+CSS+JavaScript实现简单的日历效果
初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几. 所有代码: <!DOCTYPE html&g ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
Web Audio API实现简单变声效果
前言想在网页中实现实时音频变声效果该如何实现呢,之前遇到这种处理音视频的需求,可能会想到需要借助C代码实现.但是现在随着浏览器性能的提升.web API的丰富,通过浏览器原生的API也可以操作音频数 ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...

前端实现简单的loding效果

前端实现简单的loding效果相关推荐

最新文章

热门文章