loading加载

最新推荐文章于 2023-04-25 11:56:51 发布
最新推荐文章于 2023-04-25 11:56:51 发布
阅读量499 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu_mouse/article/details/46764581
版权

<style>


.preloader {
    display: none;
    width: 20px;
    height: 20px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: preloader-spin 1s step-end infinite;
    animation: preloader-spin 1s step-end infinite;
}
.preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
}
.preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
}
@-webkit-keyframes preloader-spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    8.33333333% {
        -webkit-transform: rotate(30deg);
    }
    16.66666667% {
        -webkit-transform: rotate(60deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    33.33333333% {
        -webkit-transform: rotate(120deg);
    }
    41.66666667% {
        -webkit-transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    58.33333333% {
        -webkit-transform: rotate(210deg);
    }
    66.66666667% {
        -webkit-transform: rotate(240deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    83.33333333% {
        -webkit-transform: rotate(300deg);
    }
    91.66666667% {
        -webkit-transform: rotate(330deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes preloader-spin {
    0% {
        transform: rotate(0deg);
    }
    8.33333333% {
        transform: rotate(30deg);
    }
    16.66666667% {
        transform: rotate(60deg);
    }
    25% {
        transform: rotate(90deg);
    }
    33.33333333% {
        transform: rotate(120deg);
    }
    41.66666667% {
        transform: rotate(150deg);
    }
    50% {
        transform: rotate(180deg);
    }
    58.33333333% {
        transform: rotate(210deg);
    }
    66.66666667% {
        transform: rotate(240deg);
    }
    75% {
        transform: rotate(270deg);
    }
    83.33333333% {
        transform: rotate(300deg);
    }
    91.66666667% {
        transform: rotate(330deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

</style>




$(function(){

 (function(){
 //所有要加载的接口用数组存起来
 var arrUrl=[
 'http://www.wookmark.com/api/json/popular?callback=?&page=1',
 'http://www.wookmark.com/api/json/popular?callback=?&page=2',
 'http://www.wookmark.com/api/json/popular?callback=?&page=3',
 'http://www.wookmark.com/api/json/popular?callback=?&page=4',
 'http://www.wookmark.com/api/json/popular?callback=?&page=1',
 'http://www.wookmark.com/api/json/popular?callback=?&page=1',
 'http://www.wookmark.com/api/json/popular?callback=?&page=2',
 'http://www.wookmark.com/api/json/popular?callback=?&page=3',
 'http://www.wookmark.com/api/json/popular?callback=?&page=4',
 'http://www.wookmark.com/api/json/popular?callback=?&page=5',
 'http://www.wookmark.com/api/json/popular?callback=?&page=1',
 'http://www.wookmark.com/api/json/popular?callback=?&page=2',
 'http://www.wookmark.com/api/json/popular?callback=?&page=3',
 'http://www.wookmark.com/api/json/popular?callback=?&page=4',
 'http://www.wookmark.com/api/json/popular?callback=?&page=5',
 'http://www.wookmark.com/api/json/popular?callback=?&page=1',
 'http://www.wookmark.com/api/json/popular?callback=?&page=2',
 'http://www.wookmark.com/api/json/popular?callback=?&page=3',
 'http://www.wookmark.com/api/json/popular?callback=?&page=4',
 'http://www.wookmark.com/api/json/popular?callback=?&page=5',
 'http://www.wookmark.com/api/json/popular?callback=?&page=4',
 'http://www.wookmark.com/api/json/popular?callback=?&page=5',
 'http://www.wookmark.com/api/json/popular?callback=?&page=1'
  
  
 ];
 //var arrUrl2=[];
  
 //截取参数
 //for(var i=0,j=arrUrl.length;i<j;i++){
 // var ss=arrUrl[i].split('=')[2];
 // arrUrl2.push(ss);
 //}
 //
 var oImgload=$('.preloader');
 var oloadtext=$('#loadtext');
 oImgload.css({
 "display":"block"
 });
  
 var arr3=[];
 var num=0;
 //for(var i=0;i<arrUrl.length;i++){
 //$.getJSON(arrUrl[i], function(Data) {
 //alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 //oloadtext.html(parseInt(b/arrUrl.length*100)+"%");
  
 // });
  
 //}
  
 ajax1=$.getJSON(arrUrl[1], function(Data) {
 num++;
  
 //alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.empty().html(parseInt(num/5*100)+"%");
  
 });
  
 ajax2=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
 ajax3=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
 ajax4=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
  
  
 ajax5=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
 ajax6=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
 ajax7=$.getJSON(arrUrl[2], function(Data) {
 num++
 // alert(Data)
 //alert(parseInt(num/arrUrl.length*100)+"%")
 oloadtext.html(parseInt(num/7*100)+"%");
  
 });
  
  
 // alert(ajax1)\
 $.when(ajax1, ajax2, ajax3 ,ajax4, ajax5 ,ajax6,ajax7).done(function(){
  
 oImgload.css({
 "display":"none"
 });
  
 // alert("请求成功")
  
 }).fail(function(){
  
 alert("网络不好，请刷新一下");
 location.reload() ;
  
 });
  
  
  
  
 })()
  
  
  
hu_mouse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用$.when()解决AJAX异步难题之:多个ajax操作进行逻辑与(and)
aty
07-23 1万+
$.when()方法可以合并多个Promise得到一个新的Promise，相当于在原多个Promise之间建立了AND（逻辑与）的关系，如果所有组成Promise都已成功，则令合并后的Promise也成功，如果有任意一个组成Promise失败，则立即令合并后的Promise失败。
jquery-jquery.preloader页面预加载插件
weixin_41395648的博客
09-05 3151
参考文档http://www.htmleaf.com/jQuery/Layout-Interface/201607263781.html * 载入js: &lt;script src="jquery/jquery-3.2.1.min.js"&gt;&lt;/script&gt;     &lt;script src="jquery/jquery.preloader.min.js"&gt;&lt...
一个简单的loading
猫老板的豆
12-23 718
一个简单的无图片loadingCSS(无图片)：/*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.2
preloader流程----基于MTK平台
热门推荐
cnmlrxtoyt的博客
01-21 1万+
一、preloader流程简介 1、启动流程 （1）设备上电起来后，跳转到Boot ROM(不是flash)中的bootcode中执行把pre-loader加载起到ISRAM， 因为当前DRAM（RAM分SRAM跟DRAM，简单来说SRAM就是cache，DRAM就是普通内存）还没有准备好，所以要先把pre-loaderload到芯片内部的ISRAM（Internal SRAM)中。 （
layui loading加载
qq_43024877的博客
10-31 981
项目场景 layui loading加载： @Override var loading = layer.msg('信息获取中', {icon: 16, shade: 0.3, time:0}); //定义并执行loading $.post('{:url("index/Saas/mess8")}?type=ocr', {data:result,types:'back'}, function (e) {
loading 加载
starry__sty的博客
05-20 1979
loading 加载 他有几个参数 作用:加载数据时显示动效。 参数 说明 target Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 lock 同 v-loading 指令中的 lock 修饰符 text 显示在加载图标下方的加载文案 spinner 自定义加载图标类名 background 遮罩背景色 customClass Loa
vue使用loading加载
weixin_39246975的博客
04-13 8991
1、效果: 1649832674984 2、前言： 在vue中提供v-loading命令，用于div的loading加载，因为v-loading需要绑定一个双向绑定的变量，因此会产生如果页面需要多个loading，则需要很多个变量，在此不必要的情况下，作者自己写了一个vue的插件。 1、引入依赖 #如果你的vue项目版本为3.0+,使用该命令 npm i loading-viewer-v
element ui Loading 加载
m0_48259951的博客
06-13 1109
Loading 加载组件化建一个js文件 在页面引用 使用
CSS实现loading加载动画
weixin_43541158的博客
04-25 1098
CSS实现loading加载动画效果
loading加载gif动画
01-02
让我们深入探讨一下“loading加载gif动画”的相关知识点。 1. **GIF格式**：GIF（Graphics Interchange Format）是一种流行的图像文件格式，支持透明度和动画功能。由于其体积小、跨平台兼容性好，常用于网页设计中...
layui加载数据显示loading加载完成loading消失的实例代码
10-16
今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
105个网页loading加载gif图标下载
08-25
收集的105个网页loading加载gif图标，加载中动画gif。希望对大家有用。
发光Loading加载框动画特效
07-24
发光Loading加载框动画特效是一种利用CSS3技术实现的网页元素动态展示效果，它在网页内容加载过程中提供视觉反馈，给予用户界面生动且专业的体验。这种特效通常由一个带有圆角的边框组成，边框会呈现出发光的效果，...
发光Loading加载特效特效代码
03-20
发光Loading加载特效是一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。
基于springcloud微服务开发平台
最新发布
07-22
采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架：BladeTool BladeTool已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 注册中心、配置中心选型Nacos，为工程瘦身的同时加强各模块之间的联动。 极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 借鉴OAuth2，自研多终端认证系统，可控制子系统的token权限互相隔离。 借鉴Security，自研Secure模块，采用JWT做Token认证，可拓展集成Redis等细颗粒度控制方案。 稳定生产了六年，经历了从 Camden -> Hoxton -> 2023 的技术架构，也经历了从fat jar -> docker -> k8s + jenkins的部署架构。 项目分包明确，规范微服务的开发模式，使包与包
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包
07-22
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 诗韵人间网站 系统管理 修改密码 年代管理 年代录入 诗词管理 诗词录入 诗词搜索 留言板 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码）
07-22
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
07-22
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
loading加载图片
01-13
loading加载图片是指在网页或者应用程序中，为了提高用户体验，在图片未完全加载出来之前，显示一个加载动画或者加载提示语，告诉用户图片正在加载中，以免出现长时间的等待或者空白页面。 loading加载图片的目的是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值