material 0.9.18 → 0.9.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/loader.js +64 -42
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "material",
3
- "version": "0.9.18",
3
+ "version": "0.9.19",
4
4
  "description": "A lightweight implementation of Material Design Components for the web - ES6",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/src/loader.js CHANGED
@@ -3,7 +3,7 @@ import emitter from './module/emitter'
3
3
  class Loader {
4
4
  static defaults = {
5
5
  class: 'loader',
6
- timeout: 10000
6
+ timeout: 17000
7
7
  }
8
8
 
9
9
  constructor (options) {
@@ -25,51 +25,69 @@ class Loader {
25
25
  this.element.appendChild(this.container)
26
26
 
27
27
  const svg = `
28
- <svg
29
- version="1.1"
30
- id="dc-spinner"
31
- xmlns="http://www.w3.org/2000/svg"
32
- x="0px" y="0px"
33
- width:"38"
34
- height:"38"
35
- viewBox="0 0 38 38"
36
- preserveAspectRatio="xMinYMin meet"
37
- >
38
- <path class="circles" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
39
- C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
40
- C34.797,11.841,28.159,5.203,20,5.203z">
41
- </path>
42
-
43
- <path class="circles" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
44
- S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
45
- S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
46
- </path>
28
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
29
+ <circle
30
+ class="base"
31
+ cx="25"
32
+ cy="25"
33
+ r="20"
34
+ fill="none"
35
+ stroke="#e5e7eb"
36
+ stroke-width="3"
37
+ />
38
+ <circle
39
+ class="base"
40
+ cx="25"
41
+ cy="25"
42
+ r="16"
43
+ fill="none"
44
+ stroke="#e5e7eb"
45
+ stroke-width="2"
46
+ />
47
+
48
+ <circle
49
+ class="outer"
50
+ cx="25"
51
+ cy="25"
52
+ r="20"
53
+ fill="none"
54
+ stroke-width="3"
55
+ stroke-linecap="round"
56
+ stroke-dasharray="62.8 62.8"
57
+ stroke-dashoffset="62.8">
58
+ <animateTransform
59
+ attributeName="transform"
60
+ type="rotate"
61
+ from="0 25 25"
62
+ to="360 25 25"
63
+ calcMode="spline"
64
+ keySplines="0.4, 0, 0.2, 1"
65
+ keyTimes="0;1"
66
+ dur="2s"
67
+ repeatCount="indefinite"
68
+ />
69
+ </circle>
47
70
 
48
- <path class="circletwo" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
49
- c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
50
- <animateTransform
51
- attributeName="transform"
52
- type="rotate"
53
- from="0 20 20"
54
- to="360 20 20"
55
- calcMode="spline"
56
- keySplines="0.4, 0, 0.2, 1"
57
- keyTimes="0;1"
58
- dur="2s"
59
- repeatCount="indefinite" />
60
- </path>
71
+ <circle
72
+ class="inner"
73
+ cx="25"
74
+ cy="25"
75
+ r="16"
76
+ fill="none"
61
77
 
62
- <path class="circleone" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
63
- c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
64
- C12.875,32.922,7.078,27.125,7.078,20z">
65
- <animateTransform
78
+ stroke-width="2"
79
+ stroke-linecap="round"
80
+ stroke-dasharray="50.24 50.24"
81
+ stroke-dashoffset="50.24">
82
+ <animateTransform
66
83
  attributeName="transform"
67
84
  type="rotate"
68
- from="0 20 20"
69
- to="360 20 20"
70
- dur="1.8s"
71
- repeatCount="indefinite" />
72
- </path>
85
+ from="0 25 25"
86
+ to="360 25 25"
87
+ dur="1.8s"
88
+ repeatCount="indefinite"
89
+ />
90
+ </circle>
73
91
  </svg>`
74
92
 
75
93
  this.container.innerHTML = svg
@@ -79,6 +97,10 @@ class Loader {
79
97
  this.container.appendChild(this.text)
80
98
  }
81
99
 
100
+ setText (text) {
101
+ this.text.innerHTML = text
102
+ }
103
+
82
104
  show () {
83
105
  this.element.classList.add('show')
84
106