<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
canvas{
background: aquamarine;
}
</style>
</head>
<body>
<div style=" padding-left: 600px;" id=‘loading_panl’>
<lable id="lbl_Info"></lable>
<canvas id="test" width=200 height=200></canvas>
</div>

<script type="text/javascript">
var deg = 0; //全局变量 用来存放 canvas 绘制的角度
var test = function(deg,test){ //角度、 canvasid

//获取画布 对象
var canvas2d = document.getElementById("test").getContext("2d");
//canvas绘制圆形进度
var r = deg*Math.PI/180;
//绘制文字 filltext( text，x,y)
canvas2d.fillText("正在玩命加载中. . . . ",65,140);
//填充颜色
canvas2d.fillStyle = "#B2DFF5";
//由于想让圆形动起来 就要一直擦除 重绘
// 区域自己控制一下
//手机需要在有限的屏幕中做很多事情 还是精确到像素吧（有残留的一点点没清掉 请将像素加上 0.5）
canvas2d.clearRect(0,0,200,122);
//开始绘制
canvas2d.beginPath();
//canvas的外圆颜色
canvas2d.strokeStyle = "#84F2ED";
//圆外框的宽度 别太宽 有点恶心
canvas2d.lineWidth = 2.5;
//canvas绘制弧形
canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false);
canvas2d.fill();
canvas2d.stroke();
canvas2d.closePath();
};
//使用定时器让html5 canvas绘制圆形进度动起来
//此时你可以使用 ajax 来做请求了
Example:
$.ajax({
url:"",
data:{},
success(data)
{
// clearInterval(t);
//隐藏之前那个DIV咯
},
error:
{
// 提示页面那个lable 提示加载失败的原因 <要分手的时候 理由即使牵强都没办法>
}

})

var t = setInterval(function(){
//循环给 圆弧加角度
//如果你需要快就加的多一点吧
deg+=2;
//调用绘制方法
test(deg);
//转一圈还是N圈就看你的喜好了。
if(deg>=365){

deg=0;
}
},20);
$.ajax({
type:"get",
url:"",
async:true
});
</script>
</body>
</html>

loading加载的代码的更多相关文章

  1. loading加载和layer.js

    layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...

  2. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  3. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  4. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  5. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  6. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  7. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  8. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  9. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

随机推荐

  1. mysql 下载资源地址

    http://mirror.neu.edu.cn/mysql/Downloads/MySQL-5.6/

  2. 摄像头录制视频并且保存成mp4

    import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...

  3. javaweb环境搭建

    首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭建. 1.安装工具 第一步,下载并安装JDK,到官网 ...

  4. import 语句

    声明package的语句必须在java类的有效代码第一行,所import语句要放在package 声明语句之后. import的语法格式为:    import+空格+类全限定名+: 该语句的作用是, ...

  5. (C/C++学习笔记) 二十二. 标准模板库

    二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...

  6. 3.8 C++继承机制下的析构函数

    参考:http://www.weixueyuan.net/view/6365.html 总结: 构造函数的执行顺序是按照继承顺序自顶向下的,从基类到派生类,而析构函数的执行顺序是按照继承顺序自下向上, ...

  7. python获取代理IP

    利用requests库获取代理,用Beautiful库解析网页筛选ip # -*- coding: utf- -*- import requests from bs4 import Beautiful ...

  8. 用postman做自动化测试

    pre-request script: pm.environment.set("title", data.title);pm.environment.set("tab&q ...

  9. 强化学习7-Sarsa

    之前讲到时序差分是目前主流强化学习的基本思路,这节就学习一下主流算法之一 Sarsa模型. Sarsa 是免模型的控制算法,是通过更新状态动作价值函数来得到最优策略的方法. 更新方法 Q(S,A)=Q ...

  10. poj3279(dfs+二进制枚举思路)

    题意转载自https://www.cnblogs.com/blumia/p/poj3279.html 题目属性:DFS 相关题目:poj3276 题目原文:[desc]Farmer John know ...