1 | 'use strict';
|
2 |
|
3 | const spinners = {
|
4 | 'bubbles': {
|
5 | dur: 1000,
|
6 | circles: 9,
|
7 | fn: (dur, index, total) => {
|
8 | const animationDelay = `${(dur * index / total) - dur}ms`;
|
9 | const angle = 2 * Math.PI * index / total;
|
10 | return {
|
11 | r: 5,
|
12 | style: {
|
13 | 'top': `${9 * Math.sin(angle)}px`,
|
14 | 'left': `${9 * Math.cos(angle)}px`,
|
15 | 'animation-delay': animationDelay,
|
16 | }
|
17 | };
|
18 | }
|
19 | },
|
20 | 'circles': {
|
21 | dur: 1000,
|
22 | circles: 8,
|
23 | fn: (dur, index, total) => {
|
24 | const step = index / total;
|
25 | const animationDelay = `${(dur * step) - dur}ms`;
|
26 | const angle = 2 * Math.PI * step;
|
27 | return {
|
28 | r: 5,
|
29 | style: {
|
30 | 'top': `${9 * Math.sin(angle)}px`,
|
31 | 'left': `${9 * Math.cos(angle)}px`,
|
32 | 'animation-delay': animationDelay,
|
33 | }
|
34 | };
|
35 | }
|
36 | },
|
37 | 'circular': {
|
38 | dur: 1400,
|
39 | elmDuration: true,
|
40 | circles: 1,
|
41 | fn: () => {
|
42 | return {
|
43 | r: 20,
|
44 | cx: 48,
|
45 | cy: 48,
|
46 | fill: 'none',
|
47 | viewBox: '24 24 48 48',
|
48 | transform: 'translate(0,0)',
|
49 | style: {}
|
50 | };
|
51 | }
|
52 | },
|
53 | 'crescent': {
|
54 | dur: 750,
|
55 | circles: 1,
|
56 | fn: () => {
|
57 | return {
|
58 | r: 26,
|
59 | style: {}
|
60 | };
|
61 | }
|
62 | },
|
63 | 'dots': {
|
64 | dur: 750,
|
65 | circles: 3,
|
66 | fn: (_, index) => {
|
67 | const animationDelay = -(110 * index) + 'ms';
|
68 | return {
|
69 | r: 6,
|
70 | style: {
|
71 | 'left': `${9 - (9 * index)}px`,
|
72 | 'animation-delay': animationDelay,
|
73 | }
|
74 | };
|
75 | }
|
76 | },
|
77 | 'lines': {
|
78 | dur: 1000,
|
79 | lines: 12,
|
80 | fn: (dur, index, total) => {
|
81 | const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
|
82 | const animationDelay = `${(dur * index / total) - dur}ms`;
|
83 | return {
|
84 | y1: 17,
|
85 | y2: 29,
|
86 | style: {
|
87 | 'transform': transform,
|
88 | 'animation-delay': animationDelay,
|
89 | }
|
90 | };
|
91 | }
|
92 | },
|
93 | 'lines-small': {
|
94 | dur: 1000,
|
95 | lines: 12,
|
96 | fn: (dur, index, total) => {
|
97 | const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
|
98 | const animationDelay = `${(dur * index / total) - dur}ms`;
|
99 | return {
|
100 | y1: 12,
|
101 | y2: 20,
|
102 | style: {
|
103 | 'transform': transform,
|
104 | 'animation-delay': animationDelay,
|
105 | }
|
106 | };
|
107 | }
|
108 | }
|
109 | };
|
110 | const SPINNERS = spinners;
|
111 |
|
112 | exports.SPINNERS = SPINNERS;
|