1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <title>Demo: Spinner</title>
|
6 |
|
7 | <link rel="stylesheet" href="../build/marble.css">
|
8 | <link rel="stylesheet" href="../build/fonts/galano/galano.css">
|
9 | <link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
|
10 | <link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
|
11 |
|
12 | <style>
|
13 | body {
|
14 | padding: 20px;
|
15 | text-align: center;
|
16 | }
|
17 |
|
18 | .boxes {
|
19 | display: grid;
|
20 | grid-template-columns: 1fr 1fr 1fr;
|
21 | grid-gap: 20px;
|
22 | max-width: 640px;
|
23 | margin: 0 auto 20px;
|
24 | }
|
25 |
|
26 | .box {
|
27 | border: 0;
|
28 | background-color: white;
|
29 | border-radius: 4px;
|
30 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
31 | color: rgba(0, 0, 0, .8);
|
32 | font-size: 14px;
|
33 | font-weight: 400;
|
34 | height: 160px;
|
35 | padding: 12px;
|
36 | text-align: center;
|
37 | width: 200px;
|
38 | vertical-align: middle;
|
39 | display: table;
|
40 | justify-self: center;
|
41 | align-self: center;
|
42 | }
|
43 |
|
44 | .box h2,
|
45 | .box .spinner {
|
46 | margin: 0 0 24px;
|
47 | padding: 0;
|
48 | }
|
49 | </style>
|
50 | </head>
|
51 | <body>
|
52 | <h1>Spinners</h1>
|
53 | <div class="boxes">
|
54 | <div class="box">
|
55 | <h2>spinner large</h3>
|
56 | <span class="spinner spinner-large">
|
57 | <span class="icon-12-check"></span>
|
58 | </span>
|
59 | </div>
|
60 |
|
61 | <div class="box">
|
62 | <h2>spinner medium</h3>
|
63 | <span class="spinner spinner-medium">
|
64 | <span class="icon-12-check"></span>
|
65 | </span>
|
66 | </div>
|
67 |
|
68 | <div class="box">
|
69 | <h2>spinner small</h3>
|
70 | <span class="spinner spinner-small">
|
71 | <span class="icon-12-check"></span>
|
72 | </span>
|
73 | </div>
|
74 |
|
75 | <div class="box">
|
76 | <h2>spinner large danger</h3>
|
77 | <span class="spinner spinner-large spinner-danger">
|
78 | <span class="icon-12-close-short"></span>
|
79 | </span>
|
80 | </div>
|
81 |
|
82 | <div class="box">
|
83 | <h2>spinner medium danger</h3>
|
84 | <span class="spinner spinner-medium spinner-danger">
|
85 | <span class="icon-12-close-short"></span>
|
86 | </span>
|
87 | </div>
|
88 |
|
89 | <div class="box">
|
90 | <h2>spinner small danger</h3>
|
91 | <span class="spinner spinner-small spinner-danger">
|
92 | <span class="icon-12-close-short"></span>
|
93 | </span>
|
94 | </div>
|
95 |
|
96 |
|
97 | <div class="box">
|
98 | <h2>spinner large warning</h3>
|
99 | <span class="spinner spinner-large spinner-warning">
|
100 | <span class="icon-12-exclamation"></span>
|
101 | </span>
|
102 | </div>
|
103 |
|
104 | <div class="box">
|
105 | <h2>spinner medium warning</h3>
|
106 | <span class="spinner spinner-medium spinner-warning">
|
107 | <span class="icon-12-exclamation"></span>
|
108 | </span>
|
109 | </div>
|
110 |
|
111 | <div class="box">
|
112 | <h2>spinner small warning</h3>
|
113 | <span class="spinner spinner-small spinner-warning">
|
114 | <span class="icon-12-exclamation"></span>
|
115 | </span>
|
116 | </div>
|
117 | </div>
|
118 |
|
119 |
|
120 | <div class="boxes">
|
121 | <div class="box">
|
122 | <h2>spinner done</h3>
|
123 | <span class="spinner spinner-large spinner-done">
|
124 | <span class="icon-12-check"></span>
|
125 | </span>
|
126 | </div>
|
127 |
|
128 | <div class="box">
|
129 | <h2>spinner done</h3>
|
130 | <span class="spinner spinner-medium spinner-done">
|
131 | <span class="icon-12-check"></span>
|
132 | </span>
|
133 | </div>
|
134 |
|
135 | <div class="box">
|
136 | <h2>spinner done</h3>
|
137 | <span class="spinner spinner-small spinner-done">
|
138 | <span class="icon-12-check"></span>
|
139 | </span>
|
140 | </div>
|
141 |
|
142 | <div class="box">
|
143 | <h2>spinner done danger</h3>
|
144 | <span class="spinner spinner-large spinner-danger spinner-done">
|
145 | <span class="icon-12-close-short"></span>
|
146 | </span>
|
147 | </div>
|
148 |
|
149 | <div class="box">
|
150 | <h2>spinner done danger</h3>
|
151 | <span class="spinner spinner-medium spinner-danger spinner-done">
|
152 | <span class="icon-12-close-short"></span>
|
153 | </span>
|
154 | </div>
|
155 |
|
156 | <div class="box">
|
157 | <h2>spinner done danger</h3>
|
158 | <span class="spinner spinner-small spinner-danger spinner-done">
|
159 | <span class="icon-12-close-short"></span>
|
160 | </span>
|
161 | </div>
|
162 |
|
163 | <div class="box">
|
164 | <h2>spinner done warning</h3>
|
165 | <span class="spinner spinner-large spinner-warning spinner-done">
|
166 | <span class="icon-12-exclamation"></span>
|
167 | </span>
|
168 | </div>
|
169 |
|
170 | <div class="box">
|
171 | <h2>spinner done warning</h3>
|
172 | <span class="spinner spinner-medium spinner-warning spinner-done">
|
173 | <span class="icon-12-exclamation"></span>
|
174 | </span>
|
175 | </div>
|
176 |
|
177 | <div class="box">
|
178 | <h2>spinner done warning</h3>
|
179 | <span class="spinner spinner-small spinner-warning spinner-done">
|
180 | <span class="icon-12-exclamation"></span>
|
181 | </span>
|
182 | </div>
|
183 |
|
184 | </div>
|
185 | </body>
|
186 | </html>
|