-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
306 lines (291 loc) · 10.6 KB
/
index.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSPIN - CSS Spinners and Loaders</title>
<link href="./dist/all.css" rel="stylesheet" type="text/css">
<link href="./demo/demo.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CSSPIN - CSS Spinners and Loaders">
<meta name="twitter:description" content="CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code">
<meta name="twitter:image:src" content="https://raw.githubusercontent.com/varunsridharan/css-spinners/master/demo/simple.jpg">
<meta name="twitter:creator" content="@varunsridharan2">
<meta name="twitter:url" content="https://varunsridharan.github.io/css-spinners/">
<meta property="og:title" content="CSSPIN - CSS Spinners and Loaders">
<meta property="og:description" content="CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code">
<meta property="og:url" content="https://varunsridharan.github.io/css-spinners/">
<meta property="og:image" content="https://raw.githubusercontent.com/varunsridharan/css-spinners/master/demo/simple.jpg">
</head>
<body>
<!--CSSPin Wrapper-->
<div class="cp-wrapper">
<!--Header-->
<h1>CSSSP<span>INNER</span></h1>
<p>CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code</p>
<a href="http://github.com/varunsridharan/css-spinners" target="_blank">View on Github</a>
<a href="https://sva.onl/css-spinner-tweet" target=_blank>Tweet</a>
<!--//Header-->
<div class="cp-spinners">
<br/>
<h2>Simple Spinner</h2>
<div class="cp-spinner-block">
<div class="spin"></div>
<span>Simple Spinner</span>
<pre><div class="spin"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin primary"></div>
<span>Simple Spinner primary</span>
<pre><div class="spin primary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin secondary"></div>
<span>Simple Spinner secondary</span>
<pre><div class="spin secondary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin info"></div>
<span>Simple Spinner info</span>
<pre><div class="spin info"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin success"></div>
<span>Simple Spinner success</span>
<pre><div class="spin success"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin danger"></div>
<span>Simple Spinner danger</span>
<pre><div class="spin danger"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin warning"></div>
<span>Simple Spinner warning</span>
<pre><div class="spin warning"></div></pre>
</div>
<div class="cp-spinner-block dark">
<div class="spin light"></div>
<span>Simple Spinner light</span>
<pre><div class="spin light"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin dark"></div>
<span>Simple Spinner dark</span>
<pre><div class="spin dark"></div></pre>
</div>
<hr/>
</div>
<div class="cp-spinners">
<br/>
<h2>Spinner Grow</h2>
<div class="cp-spinner-block">
<div class="spin-grow"></div>
<span>Spinner Grow</span>
<pre><div class="spin-grow"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow primary"></div>
<span>Spinner Grow primary</span>
<pre><div class="spin-grow primary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow secondary"></div>
<span>Spinner Grow secondary</span>
<pre><div class="spin-grow secondary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow info"></div>
<span>Spinner Grow info</span>
<pre><div class="spin-grow info"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow success"></div>
<span>Spinner Grow success</span>
<pre><div class="spin-grow success"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow danger"></div>
<span>Spinner Grow danger</span>
<pre><div class="spin-grow danger"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow warning"></div>
<span>Spinner Grow warning</span>
<pre><div class="spin-grow warning"></div></pre>
</div>
<div class="cp-spinner-block dark">
<div class="spin-grow light"></div>
<span>Spinner Grow light</span>
<pre><div class="spin-grow light"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-grow dark"></div>
<span>Spinner Grow dark</span>
<pre><div class="spin-grow dark"></div></pre>
</div>
<hr/>
</div>
<div class="cp-spinners">
<br/>
<h2>Spinner Round</h2>
<div class="cp-spinner-block">
<div class="spin-round"></div>
<span>Spinner Round</span>
<pre><div class="spin-round"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round primary"></div>
<span>Spinner Round primary</span>
<pre><div class="spin-round primary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round secondary"></div>
<span>Spinner Round secondary</span>
<pre><div class="spin-round secondary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round info"></div>
<span>Spinner Round info</span>
<pre><div class="spin-round info"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round success"></div>
<span>Spinner Round success</span>
<pre><div class="spin-round success"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round danger"></div>
<span>Spinner Round danger</span>
<pre><div class="spin-round danger"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round warning"></div>
<span>Spinner Round warning</span>
<pre><div class="spin-round warning"></div></pre>
</div>
<div class="cp-spinner-block dark">
<div class="spin-round light"></div>
<span>Spinner Round light</span>
<pre><div class="spin-round light"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-round dark"></div>
<span>Spinner Round dark</span>
<pre><div class="spin-round dark"></div></pre>
</div>
<hr/>
</div>
<div class="cp-spinners">
<br/>
<h2>Spinner Bubble</h2>
<div class="cp-spinner-block">
<div class="spin-bubble"></div>
<span>Spinner Bubble</span>
<pre><div class="spin-bubble"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble primary"></div>
<span>Spinner Bubble primary</span>
<pre><div class="spin-bubble primary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble secondary"></div>
<span>Spinner Bubble secondary</span>
<pre><div class="spin-bubble secondary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble info"></div>
<span>Spinner Bubble info</span>
<pre><div class="spin-bubble info"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble success"></div>
<span>Spinner Bubble success</span>
<pre><div class="spin-bubble success"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble danger"></div>
<span>Spinner Bubble danger</span>
<pre><div class="spin-bubble danger"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble warning"></div>
<span>Spinner Bubble warning</span>
<pre><div class="spin-bubble warning"></div></pre>
</div>
<div class="cp-spinner-block dark">
<div class="spin-bubble light"></div>
<span>Spinner Bubble light</span>
<pre><div class="spin-bubble light"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-bubble dark"></div>
<span>Spinner Bubble dark</span>
<pre><div class="spin-bubble dark"></div></pre>
</div>
<hr/>
</div>
<div class="cp-spinners">
<br/>
<h2>Spinner Skeleton</h2>
<div class="cp-spinner-block">
<div class="spin-skeleton"></div>
<span>Spinner Skeleton</span>
<pre><div class="spin-skeleton"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton primary"></div>
<span>Spinner Skeleton primary</span>
<pre><div class="spin-skeleton primary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton secondary"></div>
<span>Spinner Skeleton secondary</span>
<pre><div class="spin-skeleton secondary"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton info"></div>
<span>Spinner Skeleton info</span>
<pre><div class="spin-skeleton info"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton success"></div>
<span>Spinner Skeleton success</span>
<pre><div class="spin-skeleton success"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton danger"></div>
<span>Spinner Skeleton danger</span>
<pre><div class="spin-skeleton danger"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton warning"></div>
<span>Spinner Skeleton warning</span>
<pre><div class="spin-skeleton warning"></div></pre>
</div>
<div class="cp-spinner-block dark">
<div class="spin-skeleton light"></div>
<span>Spinner Skeleton light</span>
<pre><div class="spin-skeleton light"></div></pre>
</div>
<div class="cp-spinner-block ">
<div class="spin-skeleton dark"></div>
<span>Spinner Skeleton dark</span>
<pre><div class="spin-skeleton dark"></div></pre>
</div>
<hr/>
</div>
<!--Credits-->
<p class="credits">© Crafted with
<svg class="animated-svg active" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
<path fill="#F26183"
d="M7.023,2.142A3.854,3.854,0,0,0,3.763-.005C1.3-.005,0,2.094,0,4.194c0,3.486,7.023,7.811,7.023,7.811s6.982-4.284,6.982-7.811c0-2.142-1.338-4.2-3.721-4.2A3.634,3.634,0,0,0,7.023,2.142Z"></path>
</svg>
at <a href="https://github.com/varunsridharan/" target="_blank">Varun Sridharan</a></p>
<!--//Credits-->
</div>
<!--//CSSPin Wrapper-->
</body>
</html>