quasar/ui/src/components/spinner/QSpinnerPuff.js at v1 · hipertracker/quasar · GitHub

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
import Vue from 'vue'

import mixin from './spinner-mixin.js'

export default Vue.extend({
  name: 'QSpinnerPuff',

  mixins: [mixin],

  render (h) {
    return h('svg', {
      staticClass: 'q-spinner',
      class: this.classes,
      on: { ...this.qListeners },
      attrs: {
        focusable: 'false' /* needed for IE11 */,
        'stroke': 'currentColor',
        'width': this.cSize,
        'height': this.cSize,
        'viewBox': '0 0 44 44',
        'xmlns': 'http://www.w3.org/2000/svg'
      }
    }, [
      h('g', {
        attrs: {
          'fill': 'none',
          'fill-rule': 'evenodd',
          'stroke-width': '2'
        }
      }, [
        h('circle', {
          attrs: {
            'cx': '22',
            'cy': '22',
            'r': '1'
          }
        }, [
          h('animate', {
            attrs: {
              'attributeName': 'r',
              'begin': '0s',
              'dur': '1.8s',
              'values': '1; 20',
              'calcMode': 'spline',
              'keyTimes': '0; 1',
              'keySplines': '0.165, 0.84, 0.44, 1',
              'repeatCount': 'indefinite'
            }
          }),
          h('animate', {
            attrs: {
              'attributeName': 'stroke-opacity',
              'begin': '0s',
              'dur': '1.8s',
              'values': '1; 0',
              'calcMode': 'spline',
              'keyTimes': '0; 1',
              'keySplines': '0.3, 0.61, 0.355, 1',
              'repeatCount': 'indefinite'
            }
          })
        ]),
        h('circle', {
          attrs: {
            'cx': '22',
            'cy': '22',
            'r': '1'
          }
        }, [
          h('animate', {
            attrs: {
              'attributeName': 'r',
              'begin': '-0.9s',
              'dur': '1.8s',
              'values': '1; 20',
              'calcMode': 'spline',
              'keyTimes': '0; 1',
              'keySplines': '0.165, 0.84, 0.44, 1',
              'repeatCount': 'indefinite'
            }
          }),
          h('animate', {
            attrs: {
              'attributeName': 'stroke-opacity',
              'begin': '-0.9s',
              'dur': '1.8s',
              'values': '1; 0',
              'calcMode': 'spline',
              'keyTimes': '0; 1',
              'keySplines': '0.3, 0.61, 0.355, 1',
              'repeatCount': 'indefinite'
            }
          })
        ])
      ])
    ])
  }
})