<!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. JS-封装类或对象的最佳方案

    JS封装类或对象的最佳方案 面向对象强大的优点之一是能够创建自己专用的类或者对象,封装一组属性和行为.抛开性能来说,JS要比面向对象语言如JAVA要灵活好用的多,组装数据结构很灵活方便.那么我们如何来 ...

  2. VS2010编译Unigine_2010源码

    VS2010编译Unigine_2010源码[Debug版本] 1.Laucher工程属性改为控制台项目 2.Unigine工程编译时的Warnning LNK2019 a.属性--常规-目标文件名改 ...

  3. Cracking The Coding Interview 1.7

    //Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set ...

  4. SQL-29 使用join查询方式找出没有分类的电影id以及名称

    题目描述 film表 字段 说明 film_id 电影id title 电影名称 description 电影描述信息 CREATE TABLE IF NOT EXISTS film ( film_i ...

  5. transform子元素，绝对定位失效

    公司项目需要上拉刷新功能, mui下拉刷新组件采用固定布局,无法触发浏览器自带的隐藏地址栏功能. 思路: touchmove事件监听程序中,判断滚动位置:上下顶点使用transform 移动最外层容器 ...

  6. <Codis><JedisPool><DeadLock>

    Overview Background: I start a thread [call thread A below]in Spark driver to handle opening files i ...

  7. <Maven><Dependency><Conflict><Could not resolve>

    maven conflict solution: scenerio: Runtime Error: ``` java.lang.SecurityException: class "javax ...

  8. day 71-72 cookie 和session

    拓展知识   request---->请求信息 属性: request.path       # 获取访问文件路径 request.method属性 #获取请求中使用的HTTP方式(POST/G ...

  9. ALTER语句重命名，重新定义和重新排序列

    该CHANGE,MODIFY和 ALTER子句可以改变现有列的名称和定义.他们有这些比较特征: CHANGE: 可以重命名列并更改其定义,或两者都可以. 具有更多的能力MODIFY,但是以某些操作的便 ...

  10. php优秀框架codeigniter学习系列——common.php

    文件位于system/core/common.php,是框架核心文件. 该文件中定义了一系列的函数,都是框架运行中经常需要用到的.下面逐一介绍. is_php /** * Determines if ...