elmsln-loading/elmsln-loading.html at master · LRNWebComponents/elmsln-loading · 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
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../lrn-icons/lrn-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../materializecss-styles/colors.html">

<!--
`elmsln-loading`
A spinner to tell the user that something is loading. This is just the spinner though
and doesn't provide any text or anything else to indicate that it's loading, just the
visual.

@demo demo/index.html
-->

<dom-module id="elmsln-loading">
  <template>
    <style include="materializecss-styles-colors">
      :host {
        display: block;
      }
      iron-icon {
        -webkit-animation:spin 1.25s ease-out infinite;
        -moz-animation:spin 1.25s ease-out infinite;
        animation:spin 1.25s ease-out infinite;
      }
      .tiny {
        width: 1em;
        height: 1em;
        -webkit-animation:spin .75s ease-out infinite;
        -moz-animation:spin .75s ease-out infinite;
        animation:spin .75s ease-out infinite;
      }
      .small {
        width: 2em;
        height: 2em;
        -webkit-animation:spin 1s ease-out infinite;
        -moz-animation:spin 1s ease-out infinite;
        animation:spin 1s ease-out infinite;
      }
      .medium {
        width: 4em;
        height: 4em;
      }
      .large {
        width: 5em;
        height: 5em;
        -webkit-animation:spin 1.25s ease-out infinite;
        -moz-animation:spin 1.25s ease-out infinite;
        animation:spin 1.25s ease-out infinite;
      }
      .epic {
        width: 25em;
        height: 25em;
        -webkit-animation:spin 2s ease-out infinite;
        -moz-animation:spin 2s ease-out infinite;
        animation:spin 2s ease-out infinite;
      }
      @-moz-keyframes spin { 100% { -moz-transform: rotate(60deg); filter:saturate(10) invert(.9);} }
      @-webkit-keyframes spin { 100% { -webkit-transform: rotate(60deg); filter:saturate(10) invert(.9);} }
      @keyframes spin { 100% { -webkit-transform: rotate(60deg); transform:rotate(60deg);} }
    </style>
    <iron-icon icon="lrn:network" class$="[[color]] [[size]]"></iron-icon>
  </template>

  <script>
    Polymer({
      is: 'elmsln-loading',
      properties: {
        /**
         * materialize class names for color
         */
        color: {
          type: String,
          reflectToAttribute: true,
        },
        /**
         * tiny, small, medium, large, epic sizing.
         */
        size: {
          type: String,
          reflectToAttribute: true,
          value: 'medium',
        }
      },

    });
  </script>
</dom-module>