<!DOCTYPE HTML>

<html lang="zh-cmn-Hans">

<head>

        <meta charset="UTF-8">

        <title>等待载入</title>

</head>

<body>

        <canvas id="wait" height="100" width="100">你的浏览器不支持canvas</canvas>

        <script>

                var wait = document.getElementById('wait').getContext('2d');

                wait.fillRect(0,0,100,100);

                //translate() 方法重新映射画布上的 (0,0) 位置,canvas绘图是基于状态的

                wait.translate(50,50);

                //每次旋转角度

                var angle = Math.PI*2/12;

                var cos = Math.cos(angle);

                var sin = Math.sin(angle);

                wait.lineWidth = 4 ;

                wait.lineCap = 'round' ;

                var c = 0;

                setInterval(rotate,25);

                function rotate(){

                        var col = Math.floor(200/6*(c%13));

                        c++;

                        //任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图

                        //一个数学公式,每次旋转30度

                        wait.transform(cos,sin,-sin,cos,0,0);

                        wait.strokeStyle = 'rgba(0,0,'+col+',1)';

                        wait.beginPath();

                        wait.moveTo(10,0);

                        wait.lineTo(40,0);

                        wait.stroke();

                }       

        </script>

</body>

</html>

效果：

http://jsfiddle.net/aBK5Q/19/

html5--等待加载效果的更多相关文章

  1. 慢工出细活 JS 等待加载效果

    实例可以直接运行查看效果.很方便快捷 <html> <head> <meta http-equiv="content-Type" content=&q ...

  2. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

  3. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

  4. 黄聪：WordPress实现HTML5预加载

    WordPress实现HTML5预加载方法很简单,把下面代码: <?php if (is_archive() && ($paged > 1) && ($pa ...

  5. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

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

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

  7. 美团、点评、猫眼App下拉加载效果的源码分享

    今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果   以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...

  8. layui的几个简单使用(简单弹窗,加载效果,移除加载效果)

    1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...

  9. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  10. HTML5 预加载

    原文地址: HTML5 Link Prefetching 原文日期: 2010年07月07日 翻译日期: 2013年08月13日 浏览器厂商和开发者之间共同努力的一个方向就是让网站更快.现在已有很多广 ...

随机推荐

  1. 金融系列4《PUTKEY指令》

    用一个新的密钥替换一个已经存在的密钥:新密钥可以有与被替换的密钥相同的或不同的密钥版本号,但是必须与被替换的密钥有相同的密钥标识符. 用新密钥替换多个已经存在的密钥:新密钥可以有与被替换的密钥相同的或 ...

  2. 转学步园：jquery offset

    JQuery Offset实验与应用 我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div.当按钮位于角落时,div的位置设定就需要计算,使div完全显示. 我打算使用offs ...

  3. centos 6.4 apache开启gzip方法

    系统概况,主机CentOS6.4  Apache2.4 php5.3.6 mysql5.5 开始:首先得确认apache是否已经加载了mod_deflate模块 1.httpd -M 在结果中查看是否 ...

  4. 分类图 Class Diagram

    类图(Class Diagram)是描述类.接口.协作以及它们之间关系的图. 类图是系统中静态视图的一部分,静态视图可以包括许多的类图. 静态视图用于为软件系统进行结构建模,它构造系统的词汇和关系,而 ...

  5. 【转载】link和@import的区别

    link和@import的区别 原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种:行内添 ...

  6. CentOS6.5安装tomcat7

    把下载的apache-tomcat-7.0.19.tar.gz文件上传到服务器的根目录    #tar zxvf apache-tomcat-7.0.19.tar.gz    #mv apache-t ...

  7. R语言学习笔记 之 可视化地研究参议员相似性

    基于相似性聚类 很多时候,我们想了解一群人中的一个成员与其他成员之间有多么相似.例如,假设我们是一家品牌营销公司,刚刚完成了一份有潜力新品牌的研究调查问卷.在这份调查问卷中,我们向一群人展示了新品牌的 ...

  8. Ext学习-基础组件介绍

    1.目标    学习对象获取,组件基础,事件模型以及学习ExtJS中的基础组件的应用. 2.内容   1.对象获取   2.组件原理以及基础   3.事件模型   4.常用组件的介绍 3.学习步骤 1 ...

  9. HDOJ 3547 DIY Cube 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3547 题目大意:求用$C$种颜色给立方体的8个顶点染色的本质不同的方法.两种方法本质不同即不能通过旋转 ...

  10. oracle 删除表、数据

        truncate ddl语句,删除表中数据,速度要比delete快:且所有自增字段重新开始计数:删除数据保留表结构:删除的数据不进入rollback segment,无法恢复.例: trunc ...