html5 实现加载loading.......实例
1.<!DOCTYPE html>
2.<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5.<title>HTML5 Demo: canvas</title>
6.<style>
7.body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13.}
14.
15.article, section, header, footer {
16. display: block;
17.}
18.
19.#wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27.}
28.
29.h1 {
30. padding-top: 10px;
31.}
32.
33.h2 {
34. font-size: 100%;
35. font-style: italic;
36.}
37.
38.header,
39.article > *,
40.footer a,
41.footer p {
42. margin: 20px;
43.}
44.
45.footer > * {
46. margin: 20px;
47. color: #999;
48.}
49.
50.article {
51. position: relative;
52.}
53.</style>
54.<script>
55.// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56.(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57.</script>
58.</head>
59.<body>
60.<section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67.</section>
68.<script src="h5utils.js"></script>
69.<script>
70.
71.buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73.function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);
96. var right = degreesList.slice(1, degreesList.length);
97. degreesList = right.concat(left);
98. }
99.
100. function draw() {
101. var c, s, e;
102.
103. var d = 0;
104.
105. if (i == 0) {
106. reset();
107. }
108.
109. ctx.save();
110.
111. d = degreesList[i];
112. c = Math.floor(255/degrees*i);
113. ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
114. ctx.lineWidth = data.size;
115. ctx.beginPath();
116. s = Math.floor(360/degrees*(d));
117. e = Math.floor(360/degrees*(d+1)) - 1;
118.
119. ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
120. ctx.stroke();
121.
122. ctx.restore();
123.
124. i++;
125. if (i >= degrees) {
126. i = 0;
127. }
128. }
129.}
130.
131.
132.</script>
133.<script>
134.var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
135.document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
136.</script>
137.<script>
138.try {
139.var pageTracker = _gat._getTracker("UA-1656750-18");
140.pageTracker._trackPageview();
141.} catch(err) {}</script>
142.</body>
143.
144.</html>
