一个简单的loading
来源:互联网 发布:网络排错大讲解 编辑:程序博客网 时间:2024/05/30 05:15
一个简单的无图片loading
CSS(无图片):
/*loading*/.preloader-indicator-modal {position:fixed;left:50%;top:40%;padding:0.4rem;transform:translate(-50%,-50%);;background:rgba(0,0,0,0.8);z-index:11000;border-radius:0.25rem;}.preloader-indicator-modal .preloader {display:block;width:2.5rem;height:2.5rem;}.preloader {display:inline-block;width:1rem;height:1rem;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:preloader-spin 1s steps(12,end) infinite;animation:preloader-spin 1s steps(12,end) infinite;}.preloader:after {display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat;}.preloader-white:after {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}@-webkit-keyframes preloader-spin {100% {-webkit-transform:rotate(360deg);}}@keyframes preloader-spin {100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
JS:
//show loading var loading = new loader(); function loader(){ var load_content_box = document.createElement("div"); load_content_box.className = "preloader-indicator-modal"; load_content_box.id = "loading_id"; var load_content_e = document.createElement("div"); load_content_e.className = "preloader preloader-white"; load_content_box.appendChild(load_content_e); this.show = function(){ document.body.appendChild(load_content_box); }, this.hide = function(){ try{ load_content_box.remove(); }catch(error){ document.body.removeChild(load_content_box); } } }
调用:
loading.show(); //显示loading.hide(); //隐藏
效果如下:
阅读全文
0 0
- 一个简单的loading
- 一个简单的Loading过程
- jquery制作一个简单的loading
- jquery制作一个简单的loading
- CSS:一个简单的loading动画
- jquery制作一个简单的loading--页面参数传递
- js获取页面加载过程做一个简单的loading
- CSS3 animation--写一个简单的loading动画
- 一个loading效果的实例
- iphone一个loading的动画
- 绚丽的一个loading动画
- 一个高仿微博等待动画loading——等待动画的简单实现
- 简单loading
- 最简单的 ajax Loading 效果
- WPF - 简单的Loading提示窗口
- iOS 简单的loading弹出框实现
- 炫酷简单的loading效果
- 炫酷简单的loading效果
- 线程篇--线程池Executors类几种方法的使用
- 局域网内无法使用UDL文件获取SQL Server服务器名称
- 强制不让盒子内的content换行等样式
- Java 给图片添加文字功能
- Android--fragment从activity中获取数据
- 一个简单的loading
- SQL实战练习【1】
- SSL_1463--公共子串(动规练习题)
- superior drummer 3破解教程
- 数据结构实验之查找七:线性之哈希表
- VIJOS-P1134 24点游戏 dfs
- Spark RDD、DataFrame和DataSet的区别
- C#调用存储过程和函数
- final关键字使用