quasar/src/components/spinner/QSpinnerComment.js at v0.17 · 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
import mixin from './spinner-mixin.js'

export default {
  name: 'QSpinnerComment',
  mixins: [mixin],
  render (h) {
    return h('svg', {
      staticClass: 'q-spinner',
      class: this.classes,
      attrs: {
        'width': this.size,
        'height': this.size,
        'xmlns': 'http://www.w3.org/2000/svg',
        'viewBox': '0 0 100 100',
        'preserveAspectRatio': 'xMidYMid'
      }
    }, [
      h('rect', {
        attrs: {
          'x': '0',
          'y': '0',
          'width': '100',
          'height': '100',
          'fill': 'none'
        }
      }),
      h('path', {
        attrs: {
          'd': 'M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z',
          'fill': 'currentColor'
        }
      }),
      h('circle', {
        attrs: {
          'cx': '30',
          'cy': '47',
          'r': '5',
          'fill': '#fff'
        }
      }, [
        h('animate', {
          attrs: {
            'attributeName': 'opacity',
            'from': '0',
            'to': '1',
            'values': '0;1;1',
            'keyTimes': '0;0.2;1',
            'dur': '1s',
            'repeatCount': 'indefinite'
          }
        })
      ]),
      h('circle', {
        attrs: {
          'cx': '50',
          'cy': '47',
          'r': '5',
          'fill': '#fff'
        }
      }, [
        h('animate', {
          attrs: {
            'attributeName': 'opacity',
            'from': '0',
            'to': '1',
            'values': '0;0;1;1',
            'keyTimes': '0;0.2;0.4;1',
            'dur': '1s',
            'repeatCount': 'indefinite'
          }
        })
      ]),
      h('circle', {
        attrs: {
          'cx': '70',
          'cy': '47',
          'r': '5',
          'fill': '#fff'
        }
      }, [
        h('animate', {
          attrs: {
            'attributeName': 'opacity',
            'from': '0',
            'to': '1',
            'values': '0;0;1;1',
            'keyTimes': '0;0.4;0.6;1',
            'dur': '1s',
            'repeatCount': 'indefinite'
          }
        })
      ])
    ])
  }
}