loading加载的代码
<!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加载的代码的更多相关文章
- loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
随机推荐
- Win10系列：C#应用控件基础5
ListBox控件 上一小节介绍的ComboBox控件在外观上仅显示当前选中的选项,通过单击此控件文本框才能看到其他选项,而ListBox控件能够以列表形式始终显示选项.在ListBox控件中可以添加 ...
- Win10系列：C#应用控件基础4
ComboBox控件 ComboBox控件包含一个不可编辑的文本框和一个下拉列表,这个下拉列表是由多个ComboBoxItem子元素组成的.使用ComboBox控件可以节省界面空间,因为ComboBo ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角
private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...
- DBProxy 读写分离使用说明
美团点评DBProxy读写分离使用说明 目的 因为业务架构上需要实现读写分离,刚好前段时间美团点评开源了在360Atlas基础上开发的读写分离中间件DBProxy,关于其介绍在官方文档已经有很详细 ...
- tomcat 线程数与 mysql 连接数综合调优
目前线上系统包含 数据收集+数据分析+中心服务,三个均为 tomcat,共用一个mysql服务. 由于tomcat最大线程数200 *3 =600,最大并发时,会有600个jdbc连接.当然这是极端情 ...
- 奇怪问题之@RequestBody问题
在项目中使用到了@RequestBody注解:该注解的作用是获取Request请求中body中的数据:最近测试项目的时候发现调用该接口的时候直接返回状态400,当将@RequestBody注解去掉以后 ...
- L1-055 谁是赢家
某电视台的娱乐节目有个表演评审环节,每次安排两位艺人表演,他们的胜负由观众投票和 3 名评委投票两部分共同决定.规则为:如果一位艺人的观众票数高,且得到至少 1 名评委的认可,该艺人就胜出:或艺人的观 ...
- htmlayout 最简单的实践，用于理解实现原理。
/ testHtmlayout.cpp : 定义应用程序的入口点. // #include "stdafx.h" #include "testHtmlayout.h&qu ...
- ubuntu 搭建ss和使用方法
一 ubuntu 搭建ssa.安装 sudo apt-get install python-gevent python-pip python-m2crypto sudo pip insta ...