6 6
preserveAspectRatio="xMidYMid meet"
7 7
focusable="false"
8 8
:viewBox="`0 0 ${mdDiameter} ${mdDiameter}`"
9 -
:style="svgStyles">
10 -
<circle class="md-progress-spinner-circle" cx="50%" cy="50%" :r="circleRadius" :style="circleStyles"></circle>
9 +
ref="md-progress-spinner-draw">
10 +
<circle class="md-progress-spinner-circle" cx="50%" cy="50%" :r="circleRadius" ref="md-progress-spinner-circle"></circle>
11 11
</svg>
12 12
</div>
13 13
</transition>
16 16
<script>
17 17
import MdComponent from 'core/MdComponent'
18 18
import MdPropValidator from 'core/utils/MdPropValidator'
19 -
import INDETERMINATE_ANIMATION_TEMPLATE from './MdProgressSpinnerAnimation'
20 19 21 20
const MdProgressSpinner = {
22 21
styleTag: null,
72 71
['md-' + this.mdMode]: true
73 72
}
74 73
},
75 -
svgStyles () {
76 -
const size = `${this.mdDiameter}px`
77 - 78 -
return {
79 -
width: size,
80 -
height: size
81 -
}
82 -
},
83 -
circleStyles () {
84 -
return {
85 -
'stroke-dashoffset': this.circleStrokeDashOffset,
86 -
'stroke-dasharray': this.circleStrokeDashArray,
87 -
'stroke-width': this.circleStrokeWidth,
88 -
'animation-name': 'md-progress-spinner-stroke-rotate-' + this.mdDiameter
89 -
}
90 -
},
91 74
circleRadius () {
92 75
return (this.mdDiameter - this.mdStroke) / 2
93 76
},
114 97
},
115 98
watch: {
116 99
mdDiameter () {
117 -
this.attachStyleTag()
100 +
this.attachSvgStyle()
101 +
this.attachCircleStyle()
118 102
}
119 103
},
120 104
methods: {
121 -
getAnimationCSS () {
122 -
return INDETERMINATE_ANIMATION_TEMPLATE
123 -
.replace(/START_VALUE/g, `${0.95 * this.circleCircumference}`)
124 -
.replace(/END_VALUE/g, `${0.2 * this.circleCircumference}`)
125 -
.replace(/DIAMETER/g, `${this.mdDiameter}`);
105 +
attachSvgStyle () {
106 +
const svg = this.$refs['md-progress-spinner-draw']
107 +
const size = `${this.mdDiameter}px`
108 +
svg.style.width = size
109 +
svg.style.height = size
126 110
},
127 -
attachStyleTag () {
128 -
let styleTag = MdProgressSpinner.styleTag
129 - 130 -
if (!styleTag) {
131 -
styleTag = document.getElementById('md-progress-spinner-styles')
132 -
}
133 - 134 -
if (!styleTag) {
135 -
styleTag = document.createElement('style')
136 - 137 -
styleTag.id = 'md-progress-spinner-styles'
138 -
document.head.appendChild(styleTag)
139 -
MdProgressSpinner.styleTag = styleTag
140 -
}
141 - 142 -
if (styleTag && styleTag.sheet) {
143 -
styleTag.sheet.insertRule(this.getAnimationCSS(), 0)
144 -
}
145 - 146 -
MdProgressSpinner.diameters.add(this.mdDiameter)
111 +
attachCircleStyle () {
112 +
const circle = this.$refs['md-progress-spinner-circle']
113 +
circle.style.strokeDashoffset = this.circleStrokeDashOffset
114 +
circle.style.strokeDasharray = this.circleStrokeDashArray
115 +
circle.style.strokeWidth = this.circleStrokeWidth;
116 +
circle.style.setProperty('--md-progress-spinner-start-value', 0.95 * this.circleCircumference)
117 +
circle.style.setProperty('--md-progress-spinner-end-value', 0.2 * this.circleCircumference)
147 118
}
148 119
},
149 120
mounted () {
150 -
this.attachStyleTag()
121 +
this.attachSvgStyle()
122 +
this.attachCircleStyle()
151 123
}
152 124
})
153 125
</script>
197 169
transform: rotate(4680deg)
198 170
}
199 171
}
172 + 173 +
@keyframes md-progress-spinner-stroke-rotate {
174 +
0% {
175 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
176 +
transform: rotate(0);
177 +
}
178 + 179 +
12.5% {
180 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
181 +
transform: rotate(0);
182 +
}
183 + 184 +
12.51% {
185 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
186 +
transform: rotateX(180deg) rotate(72.5deg);
187 +
}
188 + 189 +
25% {
190 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
191 +
transform: rotateX(180deg) rotate(72.5deg);
192 +
}
193 + 194 +
25.1% {
195 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
196 +
transform: rotate(270deg);
197 +
}
198 + 199 +
37.5% {
200 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
201 +
transform: rotate(270deg);
202 +
}
203 + 204 +
37.51% {
205 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
206 +
transform: rotateX(180deg) rotate(161.5deg);
207 +
}
208 + 209 +
50% {
210 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
211 +
transform: rotateX(180deg) rotate(161.5deg);
212 +
}
213 + 214 +
50.01% {
215 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
216 +
transform: rotate(180deg);
217 +
}
218 + 219 +
62.5% {
220 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
221 +
transform: rotate(180deg);
222 +
}
223 + 224 +
62.51% {
225 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
226 +
transform: rotateX(180deg) rotate(251.5deg);
227 +
}
228 + 229 +
75% {
230 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
231 +
transform: rotateX(180deg) rotate(251.5deg);
232 +
}
233 + 234 +
75.01% {
235 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
236 +
transform: rotate(90deg);
237 +
}
238 + 239 +
87.5% {
240 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
241 +
transform: rotate(90deg);
242 +
}
243 + 244 +
87.51% {
245 +
stroke-dashoffset: var(--md-progress-spinner-end-value);
246 +
transform: rotateX(180deg) rotate(341.5deg);
247 +
}
248 + 249 +
100% {
250 +
stroke-dashoffset: var(--md-progress-spinner-start-value);
251 +
transform: rotateX(180deg) rotate(341.5deg);
252 +
}
253 +
}
200 254 201 255
.md-progress-spinner {
202 256
display: inline-flex;
217 271 218 272
.md-progress-spinner-circle {
219 273
animation: 4s infinite $md-transition-stand-timing;
274 +
animation-name: md-progress-spinner-stroke-rotate;
220 275
}
221 276
}
222 277 RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4