forked from Automattic/kue
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathloading.js
More file actions
executable file
·109 lines (90 loc) · 1.96 KB
/
Copy pathloading.js
File metadata and controls
executable file
·109 lines (90 loc) · 1.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/*!
* kue - LoadingIndicator
* Copyright (c) 2011 LearnBoost <dev@learnboost.com>
* MIT Licensed
*/
/**
* Initialize a new `LoadingIndicator`.
*/
function LoadingIndicator() {
this.size(0);
this.fontSize(9);
this.font('helvetica, arial, sans-serif');
}
/**
* Set size to `n`.
*
* @param {Number} n
* @return {LoadingIndicator} for chaining
* @api public
*/
LoadingIndicator.prototype.size = function (n) {
this._size = n;
return this;
};
/**
* Set font size to `n`.
*
* @param {Number} n
* @return {LoadingIndicator} for chaining
* @api public
*/
LoadingIndicator.prototype.fontSize = function (n) {
this._fontSize = n;
return this;
};
/**
* Set font `family`.
*
* @param {String} family
* @return {LoadingIndicator} for chaining
*/
LoadingIndicator.prototype.font = function (family) {
this._font = family;
return this;
};
/**
* Update pos to `n`.
*
* @param {Number} n
* @return {LoadingIndicator} for chaining
*/
LoadingIndicator.prototype.update = function (n) {
this.pos = n;
return this;
};
/**
* Draw on `ctx`.
*
* @param {CanvasRenderingContext2d} ctx
* @return {LoadingIndicator} for chaining
*/
LoadingIndicator.prototype.draw = function (ctx) {
var pos = this.pos % 360
, size = this._size
, half = size / 2
, x = half
, y = half
, rad = half - 1
, fontSize = this._fontSize;
ctx.font = fontSize + 'px ' + this._font;
ctx.clearRect(0, 0, size, size);
// outer circle
ctx.strokeStyle = '#9f9f9f';
ctx.beginPath();
ctx.arc(x, y, rad, pos, Math.PI / 2 + pos, false);
ctx.stroke();
// inner circle
ctx.strokeStyle = '#eee';
ctx.beginPath();
ctx.arc(x, y, rad - 3, -pos, Math.PI / 2 - pos, false);
ctx.stroke();
// text
var text = 'Loading'
, w = ctx.measureText(text).width;
ctx.fillText(
text
, x - w / 2 + 1
, y + fontSize / 2 - 1);
return this;
};