├── README.md
├── examples
├── icomon
│ ├── fonts
│ │ ├── icomoon.eot
│ │ ├── icomoon.svg
│ │ ├── icomoon.ttf
│ │ └── icomoon.woff
│ └── style.css
└── index.html
├── loda-button.css
├── loda-button.js
└── vendor
└── jquery-1.9.1.js
/README.md:
--------------------------------------------------------------------------------
1 | loda-button
2 | ---
3 |
4 | *button with a twist*
5 |
6 | jQuery plugin that animates the button icon with CCS3 when loading data from the server ...
7 |
8 | Check out a quick walkthrough at [lugolabs](http://lugolabs.com/loda-button) website.
9 |
10 |
--------------------------------------------------------------------------------
/examples/icomon/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lugolabs/loda-button/724746228d5c42515f915d330625c13a85db23dc/examples/icomon/fonts/icomoon.eot
--------------------------------------------------------------------------------
/examples/icomon/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lugolabs/loda-button/724746228d5c42515f915d330625c13a85db23dc/examples/icomon/fonts/icomoon.ttf
--------------------------------------------------------------------------------
/examples/icomon/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lugolabs/loda-button/724746228d5c42515f915d330625c13a85db23dc/examples/icomon/fonts/icomoon.woff
--------------------------------------------------------------------------------
/examples/icomon/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:url('fonts/icomoon.eot');
4 | src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
5 | url('fonts/icomoon.woff') format('woff'),
6 | url('fonts/icomoon.ttf') format('truetype'),
7 | url('fonts/icomoon.svg#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | /* Use the following CSS code if you want to use data attributes for inserting your icons */
13 | [data-icon]:before {
14 | font-family: 'icomoon';
15 | content: attr(data-icon);
16 | speak: none;
17 | font-weight: normal;
18 | font-variant: normal;
19 | text-transform: none;
20 | line-height: 1;
21 | -webkit-font-smoothing: antialiased;
22 | }
23 |
24 | /* Use the following CSS code if you want to have a class per icon */
25 | /*
26 | Instead of a list of all class selectors,
27 | you can use the generic selector below, but it's slower:
28 | [class*="icon-"] {
29 | */
30 | .icon-home, .icon-home-2, .icon-home-3, .icon-office, .icon-newspaper, .icon-pencil, .icon-pencil-2, .icon-quill, .icon-pen, .icon-blog, .icon-droplet, .icon-paint-format, .icon-image, .icon-image-2, .icon-images, .icon-camera, .icon-music, .icon-headphones, .icon-play, .icon-film, .icon-camera-2, .icon-dice, .icon-pacman, .icon-spades, .icon-clubs, .icon-diamonds, .icon-pawn, .icon-bullhorn, .icon-connection, .icon-podcast, .icon-feed, .icon-book, .icon-books, .icon-library, .icon-file, .icon-profile, .icon-file-2, .icon-file-3, .icon-file-4, .icon-copy, .icon-copy-2, .icon-copy-3, .icon-paste, .icon-paste-2, .icon-paste-3, .icon-stack, .icon-folder, .icon-folder-open, .icon-tag, .icon-tags, .icon-barcode, .icon-qrcode, .icon-ticket, .icon-cart, .icon-cart-2, .icon-cart-3, .icon-coin, .icon-credit, .icon-calculate, .icon-support, .icon-phone, .icon-phone-hang-up, .icon-address-book, .icon-notebook, .icon-envelop, .icon-pushpin, .icon-location, .icon-location-2, .icon-compass, .icon-map, .icon-map-2, .icon-history, .icon-clock, .icon-clock-2, .icon-alarm, .icon-alarm-2, .icon-bell, .icon-stopwatch, .icon-calendar, .icon-calendar-2, .icon-print, .icon-keyboard, .icon-screen, .icon-laptop, .icon-mobile, .icon-mobile-2, .icon-tablet, .icon-tv, .icon-cabinet, .icon-drawer, .icon-drawer-2, .icon-drawer-3, .icon-box-add, .icon-box-remove, .icon-download, .icon-upload, .icon-disk, .icon-storage, .icon-undo, .icon-redo, .icon-flip, .icon-flip-2, .icon-undo-2, .icon-redo-2, .icon-forward, .icon-reply, .icon-bubble, .icon-bubbles, .icon-bubbles-2, .icon-bubble-2, .icon-bubbles-3, .icon-bubbles-4, .icon-user, .icon-users, .icon-user-2, .icon-users-2, .icon-user-3, .icon-user-4, .icon-quotes-left, .icon-busy, .icon-spinner, .icon-spinner-2, .icon-spinner-3, .icon-spinner-4, .icon-spinner-5, .icon-spinner-6, .icon-binoculars, .icon-search, .icon-zoom-in, .icon-zoom-out, .icon-expand, .icon-contract, .icon-expand-2, .icon-contract-2, .icon-key, .icon-key-2, .icon-lock, .icon-lock-2, .icon-unlocked, .icon-wrench, .icon-settings, .icon-equalizer, .icon-cog, .icon-cogs, .icon-cog-2, .icon-hammer, .icon-wand, .icon-aid, .icon-bug, .icon-pie, .icon-stats, .icon-bars, .icon-bars-2, .icon-gift, .icon-trophy, .icon-glass, .icon-mug, .icon-food, .icon-leaf, .icon-rocket, .icon-meter, .icon-meter2, .icon-dashboard, .icon-hammer-2, .icon-fire, .icon-lab, .icon-magnet, .icon-remove, .icon-remove-2, .icon-briefcase, .icon-airplane, .icon-truck, .icon-road, .icon-accessibility, .icon-target, .icon-shield, .icon-lightning, .icon-switch, .icon-power-cord, .icon-signup, .icon-list, .icon-list-2, .icon-numbered-list, .icon-menu, .icon-menu-2, .icon-tree, .icon-cloud, .icon-cloud-download, .icon-cloud-upload, .icon-download-2, .icon-upload-2, .icon-download-3, .icon-upload-3, .icon-globe, .icon-earth, .icon-link, .icon-flag, .icon-attachment, .icon-eye, .icon-eye-blocked, .icon-eye-2, .icon-bookmark, .icon-bookmarks, .icon-brightness-medium, .icon-brightness-contrast, .icon-contrast, .icon-star, .icon-star-2, .icon-star-3, .icon-heart, .icon-heart-2, .icon-heart-broken, .icon-thumbs-up, .icon-thumbs-up-2, .icon-happy, .icon-happy-2, .icon-smiley, .icon-smiley-2, .icon-tongue, .icon-tongue-2, .icon-sad, .icon-sad-2, .icon-wink, .icon-wink-2, .icon-grin, .icon-grin-2, .icon-cool, .icon-cool-2, .icon-angry, .icon-angry-2, .icon-evil, .icon-evil-2, .icon-shocked, .icon-shocked-2, .icon-confused, .icon-confused-2, .icon-neutral, .icon-neutral-2, .icon-wondering, .icon-wondering-2, .icon-point-up, .icon-point-right, .icon-point-down, .icon-point-left, .icon-warning, .icon-notification, .icon-question, .icon-info, .icon-info-2, .icon-blocked, .icon-cancel-circle, .icon-checkmark-circle, .icon-spam, .icon-close, .icon-checkmark, .icon-checkmark-2, .icon-spell-check, .icon-minus, .icon-plus, .icon-enter, .icon-exit, .icon-play-2, .icon-pause, .icon-stop, .icon-backward, .icon-forward-2, .icon-play-3, .icon-pause-2, .icon-stop-2, .icon-backward-2, .icon-forward-3, .icon-first, .icon-last, .icon-previous, .icon-next, .icon-eject, .icon-volume-high, .icon-volume-medium, .icon-volume-low, .icon-volume-mute, .icon-volume-mute-2, .icon-volume-increase, .icon-volume-decrease, .icon-loop, .icon-loop-2, .icon-loop-3, .icon-shuffle, .icon-arrow-up-left, .icon-arrow-up, .icon-arrow-up-right, .icon-arrow-right, .icon-arrow-down-right, .icon-arrow-down, .icon-arrow-down-left, .icon-arrow-left, .icon-arrow-up-left-2, .icon-arrow-up-2, .icon-arrow-up-right-2, .icon-arrow-right-2, .icon-arrow-down-right-2, .icon-arrow-down-2, .icon-arrow-down-left-2, .icon-arrow-left-2, .icon-arrow-up-left-3, .icon-arrow-up-3, .icon-arrow-up-right-3, .icon-arrow-right-3, .icon-arrow-down-right-3, .icon-arrow-down-3, .icon-arrow-down-left-3, .icon-arrow-left-3, .icon-tab, .icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked, .icon-crop, .icon-scissors, .icon-filter, .icon-filter-2, .icon-font, .icon-text-height, .icon-text-width, .icon-bold, .icon-underline, .icon-italic, .icon-strikethrough, .icon-omega, .icon-sigma, .icon-table, .icon-table-2, .icon-insert-template, .icon-pilcrow, .icon-left-to-right, .icon-right-to-left, .icon-paragraph-left, .icon-paragraph-center, .icon-paragraph-right, .icon-paragraph-justify, .icon-paragraph-left-2, .icon-paragraph-center-2, .icon-paragraph-right-2, .icon-paragraph-justify-2, .icon-indent-increase, .icon-indent-decrease, .icon-new-tab, .icon-embed, .icon-code, .icon-console, .icon-share, .icon-mail, .icon-mail-2, .icon-mail-3, .icon-mail-4, .icon-google, .icon-google-plus, .icon-google-plus-2, .icon-google-plus-3, .icon-google-plus-4, .icon-google-drive, .icon-facebook, .icon-facebook-2, .icon-facebook-3, .icon-instagram, .icon-twitter, .icon-twitter-2, .icon-twitter-3, .icon-feed-2, .icon-feed-3, .icon-feed-4, .icon-youtube, .icon-youtube-2, .icon-vimeo, .icon-vimeo2, .icon-vimeo-2, .icon-lanyrd, .icon-flickr, .icon-flickr-2, .icon-flickr-3, .icon-flickr-4, .icon-picassa, .icon-picassa-2, .icon-dribbble, .icon-dribbble-2, .icon-dribbble-3, .icon-forrst, .icon-forrst-2, .icon-deviantart, .icon-deviantart-2, .icon-steam, .icon-steam-2, .icon-github, .icon-github-2, .icon-github-3, .icon-github-4, .icon-github-5, .icon-wordpress, .icon-wordpress-2, .icon-joomla, .icon-blogger, .icon-blogger-2, .icon-tumblr, .icon-tumblr-2, .icon-yahoo, .icon-tux, .icon-apple, .icon-finder, .icon-android, .icon-windows, .icon-windows8, .icon-soundcloud, .icon-soundcloud-2, .icon-skype, .icon-reddit, .icon-linkedin, .icon-lastfm, .icon-lastfm-2, .icon-delicious, .icon-stumbleupon, .icon-stumbleupon-2, .icon-stackoverflow, .icon-pinterest, .icon-pinterest-2, .icon-xing, .icon-xing-2, .icon-flattr, .icon-foursquare, .icon-foursquare-2, .icon-paypal, .icon-paypal-2, .icon-paypal-3, .icon-yelp, .icon-libreoffice, .icon-file-pdf, .icon-file-openoffice, .icon-file-word, .icon-file-excel, .icon-file-zip, .icon-file-powerpoint, .icon-file-xml, .icon-file-css, .icon-html5, .icon-html5-2, .icon-css3, .icon-chrome, .icon-firefox, .icon-IE, .icon-opera, .icon-safari, .icon-IcoMoon {
31 | font-family: 'icomoon';
32 | speak: none;
33 | font-style: normal;
34 | font-weight: normal;
35 | font-variant: normal;
36 | text-transform: none;
37 | line-height: 1;
38 | -webkit-font-smoothing: antialiased;
39 | }
40 | .icon-home:before {
41 | content: "\e000";
42 | }
43 | .icon-home-2:before {
44 | content: "\e001";
45 | }
46 | .icon-home-3:before {
47 | content: "\e002";
48 | }
49 | .icon-office:before {
50 | content: "\e003";
51 | }
52 | .icon-newspaper:before {
53 | content: "\e004";
54 | }
55 | .icon-pencil:before {
56 | content: "\e005";
57 | }
58 | .icon-pencil-2:before {
59 | content: "\e006";
60 | }
61 | .icon-quill:before {
62 | content: "\e007";
63 | }
64 | .icon-pen:before {
65 | content: "\e008";
66 | }
67 | .icon-blog:before {
68 | content: "\e009";
69 | }
70 | .icon-droplet:before {
71 | content: "\e00a";
72 | }
73 | .icon-paint-format:before {
74 | content: "\e00b";
75 | }
76 | .icon-image:before {
77 | content: "\e00c";
78 | }
79 | .icon-image-2:before {
80 | content: "\e00d";
81 | }
82 | .icon-images:before {
83 | content: "\e00e";
84 | }
85 | .icon-camera:before {
86 | content: "\e00f";
87 | }
88 | .icon-music:before {
89 | content: "\e010";
90 | }
91 | .icon-headphones:before {
92 | content: "\e011";
93 | }
94 | .icon-play:before {
95 | content: "\e012";
96 | }
97 | .icon-film:before {
98 | content: "\e013";
99 | }
100 | .icon-camera-2:before {
101 | content: "\e014";
102 | }
103 | .icon-dice:before {
104 | content: "\e015";
105 | }
106 | .icon-pacman:before {
107 | content: "\e016";
108 | }
109 | .icon-spades:before {
110 | content: "\e017";
111 | }
112 | .icon-clubs:before {
113 | content: "\e018";
114 | }
115 | .icon-diamonds:before {
116 | content: "\e019";
117 | }
118 | .icon-pawn:before {
119 | content: "\e01a";
120 | }
121 | .icon-bullhorn:before {
122 | content: "\e01b";
123 | }
124 | .icon-connection:before {
125 | content: "\e01c";
126 | }
127 | .icon-podcast:before {
128 | content: "\e01d";
129 | }
130 | .icon-feed:before {
131 | content: "\e01e";
132 | }
133 | .icon-book:before {
134 | content: "\e01f";
135 | }
136 | .icon-books:before {
137 | content: "\e020";
138 | }
139 | .icon-library:before {
140 | content: "\e021";
141 | }
142 | .icon-file:before {
143 | content: "\e022";
144 | }
145 | .icon-profile:before {
146 | content: "\e023";
147 | }
148 | .icon-file-2:before {
149 | content: "\e024";
150 | }
151 | .icon-file-3:before {
152 | content: "\e025";
153 | }
154 | .icon-file-4:before {
155 | content: "\e026";
156 | }
157 | .icon-copy:before {
158 | content: "\e027";
159 | }
160 | .icon-copy-2:before {
161 | content: "\e028";
162 | }
163 | .icon-copy-3:before {
164 | content: "\e029";
165 | }
166 | .icon-paste:before {
167 | content: "\e02a";
168 | }
169 | .icon-paste-2:before {
170 | content: "\e02b";
171 | }
172 | .icon-paste-3:before {
173 | content: "\e02c";
174 | }
175 | .icon-stack:before {
176 | content: "\e02d";
177 | }
178 | .icon-folder:before {
179 | content: "\e02e";
180 | }
181 | .icon-folder-open:before {
182 | content: "\e02f";
183 | }
184 | .icon-tag:before {
185 | content: "\e030";
186 | }
187 | .icon-tags:before {
188 | content: "\e031";
189 | }
190 | .icon-barcode:before {
191 | content: "\e032";
192 | }
193 | .icon-qrcode:before {
194 | content: "\e033";
195 | }
196 | .icon-ticket:before {
197 | content: "\e034";
198 | }
199 | .icon-cart:before {
200 | content: "\e035";
201 | }
202 | .icon-cart-2:before {
203 | content: "\e036";
204 | }
205 | .icon-cart-3:before {
206 | content: "\e037";
207 | }
208 | .icon-coin:before {
209 | content: "\e038";
210 | }
211 | .icon-credit:before {
212 | content: "\e039";
213 | }
214 | .icon-calculate:before {
215 | content: "\e03a";
216 | }
217 | .icon-support:before {
218 | content: "\e03b";
219 | }
220 | .icon-phone:before {
221 | content: "\e03c";
222 | }
223 | .icon-phone-hang-up:before {
224 | content: "\e03d";
225 | }
226 | .icon-address-book:before {
227 | content: "\e03e";
228 | }
229 | .icon-notebook:before {
230 | content: "\e03f";
231 | }
232 | .icon-envelop:before {
233 | content: "\e040";
234 | }
235 | .icon-pushpin:before {
236 | content: "\e041";
237 | }
238 | .icon-location:before {
239 | content: "\e042";
240 | }
241 | .icon-location-2:before {
242 | content: "\e043";
243 | }
244 | .icon-compass:before {
245 | content: "\e044";
246 | }
247 | .icon-map:before {
248 | content: "\e045";
249 | }
250 | .icon-map-2:before {
251 | content: "\e046";
252 | }
253 | .icon-history:before {
254 | content: "\e047";
255 | }
256 | .icon-clock:before {
257 | content: "\e048";
258 | }
259 | .icon-clock-2:before {
260 | content: "\e049";
261 | }
262 | .icon-alarm:before {
263 | content: "\e04a";
264 | }
265 | .icon-alarm-2:before {
266 | content: "\e04b";
267 | }
268 | .icon-bell:before {
269 | content: "\e04c";
270 | }
271 | .icon-stopwatch:before {
272 | content: "\e04d";
273 | }
274 | .icon-calendar:before {
275 | content: "\e04e";
276 | }
277 | .icon-calendar-2:before {
278 | content: "\e04f";
279 | }
280 | .icon-print:before {
281 | content: "\e050";
282 | }
283 | .icon-keyboard:before {
284 | content: "\e051";
285 | }
286 | .icon-screen:before {
287 | content: "\e052";
288 | }
289 | .icon-laptop:before {
290 | content: "\e053";
291 | }
292 | .icon-mobile:before {
293 | content: "\e054";
294 | }
295 | .icon-mobile-2:before {
296 | content: "\e055";
297 | }
298 | .icon-tablet:before {
299 | content: "\e056";
300 | }
301 | .icon-tv:before {
302 | content: "\e057";
303 | }
304 | .icon-cabinet:before {
305 | content: "\e058";
306 | }
307 | .icon-drawer:before {
308 | content: "\e059";
309 | }
310 | .icon-drawer-2:before {
311 | content: "\e05a";
312 | }
313 | .icon-drawer-3:before {
314 | content: "\e05b";
315 | }
316 | .icon-box-add:before {
317 | content: "\e05c";
318 | }
319 | .icon-box-remove:before {
320 | content: "\e05d";
321 | }
322 | .icon-download:before {
323 | content: "\e05e";
324 | }
325 | .icon-upload:before {
326 | content: "\e05f";
327 | }
328 | .icon-disk:before {
329 | content: "\e060";
330 | }
331 | .icon-storage:before {
332 | content: "\e061";
333 | }
334 | .icon-undo:before {
335 | content: "\e062";
336 | }
337 | .icon-redo:before {
338 | content: "\e063";
339 | }
340 | .icon-flip:before {
341 | content: "\e064";
342 | }
343 | .icon-flip-2:before {
344 | content: "\e065";
345 | }
346 | .icon-undo-2:before {
347 | content: "\e066";
348 | }
349 | .icon-redo-2:before {
350 | content: "\e067";
351 | }
352 | .icon-forward:before {
353 | content: "\e068";
354 | }
355 | .icon-reply:before {
356 | content: "\e069";
357 | }
358 | .icon-bubble:before {
359 | content: "\e06a";
360 | }
361 | .icon-bubbles:before {
362 | content: "\e06b";
363 | }
364 | .icon-bubbles-2:before {
365 | content: "\e06c";
366 | }
367 | .icon-bubble-2:before {
368 | content: "\e06d";
369 | }
370 | .icon-bubbles-3:before {
371 | content: "\e06e";
372 | }
373 | .icon-bubbles-4:before {
374 | content: "\e06f";
375 | }
376 | .icon-user:before {
377 | content: "\e070";
378 | }
379 | .icon-users:before {
380 | content: "\e071";
381 | }
382 | .icon-user-2:before {
383 | content: "\e072";
384 | }
385 | .icon-users-2:before {
386 | content: "\e073";
387 | }
388 | .icon-user-3:before {
389 | content: "\e074";
390 | }
391 | .icon-user-4:before {
392 | content: "\e075";
393 | }
394 | .icon-quotes-left:before {
395 | content: "\e076";
396 | }
397 | .icon-busy:before {
398 | content: "\e077";
399 | }
400 | .icon-spinner:before {
401 | content: "\e078";
402 | }
403 | .icon-spinner-2:before {
404 | content: "\e079";
405 | }
406 | .icon-spinner-3:before {
407 | content: "\e07a";
408 | }
409 | .icon-spinner-4:before {
410 | content: "\e07b";
411 | }
412 | .icon-spinner-5:before {
413 | content: "\e07c";
414 | }
415 | .icon-spinner-6:before {
416 | content: "\e07d";
417 | }
418 | .icon-binoculars:before {
419 | content: "\e07e";
420 | }
421 | .icon-search:before {
422 | content: "\e07f";
423 | }
424 | .icon-zoom-in:before {
425 | content: "\e080";
426 | }
427 | .icon-zoom-out:before {
428 | content: "\e081";
429 | }
430 | .icon-expand:before {
431 | content: "\e082";
432 | }
433 | .icon-contract:before {
434 | content: "\e083";
435 | }
436 | .icon-expand-2:before {
437 | content: "\e084";
438 | }
439 | .icon-contract-2:before {
440 | content: "\e085";
441 | }
442 | .icon-key:before {
443 | content: "\e086";
444 | }
445 | .icon-key-2:before {
446 | content: "\e087";
447 | }
448 | .icon-lock:before {
449 | content: "\e088";
450 | }
451 | .icon-lock-2:before {
452 | content: "\e089";
453 | }
454 | .icon-unlocked:before {
455 | content: "\e08a";
456 | }
457 | .icon-wrench:before {
458 | content: "\e08b";
459 | }
460 | .icon-settings:before {
461 | content: "\e08c";
462 | }
463 | .icon-equalizer:before {
464 | content: "\e08d";
465 | }
466 | .icon-cog:before {
467 | content: "\e08e";
468 | }
469 | .icon-cogs:before {
470 | content: "\e08f";
471 | }
472 | .icon-cog-2:before {
473 | content: "\e090";
474 | }
475 | .icon-hammer:before {
476 | content: "\e091";
477 | }
478 | .icon-wand:before {
479 | content: "\e092";
480 | }
481 | .icon-aid:before {
482 | content: "\e093";
483 | }
484 | .icon-bug:before {
485 | content: "\e094";
486 | }
487 | .icon-pie:before {
488 | content: "\e095";
489 | }
490 | .icon-stats:before {
491 | content: "\e096";
492 | }
493 | .icon-bars:before {
494 | content: "\e097";
495 | }
496 | .icon-bars-2:before {
497 | content: "\e098";
498 | }
499 | .icon-gift:before {
500 | content: "\e099";
501 | }
502 | .icon-trophy:before {
503 | content: "\e09a";
504 | }
505 | .icon-glass:before {
506 | content: "\e09b";
507 | }
508 | .icon-mug:before {
509 | content: "\e09c";
510 | }
511 | .icon-food:before {
512 | content: "\e09d";
513 | }
514 | .icon-leaf:before {
515 | content: "\e09e";
516 | }
517 | .icon-rocket:before {
518 | content: "\e09f";
519 | }
520 | .icon-meter:before {
521 | content: "\e0a0";
522 | }
523 | .icon-meter2:before {
524 | content: "\e0a1";
525 | }
526 | .icon-dashboard:before {
527 | content: "\e0a2";
528 | }
529 | .icon-hammer-2:before {
530 | content: "\e0a3";
531 | }
532 | .icon-fire:before {
533 | content: "\e0a4";
534 | }
535 | .icon-lab:before {
536 | content: "\e0a5";
537 | }
538 | .icon-magnet:before {
539 | content: "\e0a6";
540 | }
541 | .icon-remove:before {
542 | content: "\e0a7";
543 | }
544 | .icon-remove-2:before {
545 | content: "\e0a8";
546 | }
547 | .icon-briefcase:before {
548 | content: "\e0a9";
549 | }
550 | .icon-airplane:before {
551 | content: "\e0aa";
552 | }
553 | .icon-truck:before {
554 | content: "\e0ab";
555 | }
556 | .icon-road:before {
557 | content: "\e0ac";
558 | }
559 | .icon-accessibility:before {
560 | content: "\e0ad";
561 | }
562 | .icon-target:before {
563 | content: "\e0ae";
564 | }
565 | .icon-shield:before {
566 | content: "\e0af";
567 | }
568 | .icon-lightning:before {
569 | content: "\e0b0";
570 | }
571 | .icon-switch:before {
572 | content: "\e0b1";
573 | }
574 | .icon-power-cord:before {
575 | content: "\e0b2";
576 | }
577 | .icon-signup:before {
578 | content: "\e0b3";
579 | }
580 | .icon-list:before {
581 | content: "\e0b4";
582 | }
583 | .icon-list-2:before {
584 | content: "\e0b5";
585 | }
586 | .icon-numbered-list:before {
587 | content: "\e0b6";
588 | }
589 | .icon-menu:before {
590 | content: "\e0b7";
591 | }
592 | .icon-menu-2:before {
593 | content: "\e0b8";
594 | }
595 | .icon-tree:before {
596 | content: "\e0b9";
597 | }
598 | .icon-cloud:before {
599 | content: "\e0ba";
600 | }
601 | .icon-cloud-download:before {
602 | content: "\e0bb";
603 | }
604 | .icon-cloud-upload:before {
605 | content: "\e0bc";
606 | }
607 | .icon-download-2:before {
608 | content: "\e0bd";
609 | }
610 | .icon-upload-2:before {
611 | content: "\e0be";
612 | }
613 | .icon-download-3:before {
614 | content: "\e0bf";
615 | }
616 | .icon-upload-3:before {
617 | content: "\e0c0";
618 | }
619 | .icon-globe:before {
620 | content: "\e0c1";
621 | }
622 | .icon-earth:before {
623 | content: "\e0c2";
624 | }
625 | .icon-link:before {
626 | content: "\e0c3";
627 | }
628 | .icon-flag:before {
629 | content: "\e0c4";
630 | }
631 | .icon-attachment:before {
632 | content: "\e0c5";
633 | }
634 | .icon-eye:before {
635 | content: "\e0c6";
636 | }
637 | .icon-eye-blocked:before {
638 | content: "\e0c7";
639 | }
640 | .icon-eye-2:before {
641 | content: "\e0c8";
642 | }
643 | .icon-bookmark:before {
644 | content: "\e0c9";
645 | }
646 | .icon-bookmarks:before {
647 | content: "\e0ca";
648 | }
649 | .icon-brightness-medium:before {
650 | content: "\e0cb";
651 | }
652 | .icon-brightness-contrast:before {
653 | content: "\e0cc";
654 | }
655 | .icon-contrast:before {
656 | content: "\e0cd";
657 | }
658 | .icon-star:before {
659 | content: "\e0ce";
660 | }
661 | .icon-star-2:before {
662 | content: "\e0cf";
663 | }
664 | .icon-star-3:before {
665 | content: "\e0d0";
666 | }
667 | .icon-heart:before {
668 | content: "\e0d1";
669 | }
670 | .icon-heart-2:before {
671 | content: "\e0d2";
672 | }
673 | .icon-heart-broken:before {
674 | content: "\e0d3";
675 | }
676 | .icon-thumbs-up:before {
677 | content: "\e0d4";
678 | }
679 | .icon-thumbs-up-2:before {
680 | content: "\e0d5";
681 | }
682 | .icon-happy:before {
683 | content: "\e0d6";
684 | }
685 | .icon-happy-2:before {
686 | content: "\e0d7";
687 | }
688 | .icon-smiley:before {
689 | content: "\e0d8";
690 | }
691 | .icon-smiley-2:before {
692 | content: "\e0d9";
693 | }
694 | .icon-tongue:before {
695 | content: "\e0da";
696 | }
697 | .icon-tongue-2:before {
698 | content: "\e0db";
699 | }
700 | .icon-sad:before {
701 | content: "\e0dc";
702 | }
703 | .icon-sad-2:before {
704 | content: "\e0dd";
705 | }
706 | .icon-wink:before {
707 | content: "\e0de";
708 | }
709 | .icon-wink-2:before {
710 | content: "\e0df";
711 | }
712 | .icon-grin:before {
713 | content: "\e0e0";
714 | }
715 | .icon-grin-2:before {
716 | content: "\e0e1";
717 | }
718 | .icon-cool:before {
719 | content: "\e0e2";
720 | }
721 | .icon-cool-2:before {
722 | content: "\e0e3";
723 | }
724 | .icon-angry:before {
725 | content: "\e0e4";
726 | }
727 | .icon-angry-2:before {
728 | content: "\e0e5";
729 | }
730 | .icon-evil:before {
731 | content: "\e0e6";
732 | }
733 | .icon-evil-2:before {
734 | content: "\e0e7";
735 | }
736 | .icon-shocked:before {
737 | content: "\e0e8";
738 | }
739 | .icon-shocked-2:before {
740 | content: "\e0e9";
741 | }
742 | .icon-confused:before {
743 | content: "\e0ea";
744 | }
745 | .icon-confused-2:before {
746 | content: "\e0eb";
747 | }
748 | .icon-neutral:before {
749 | content: "\e0ec";
750 | }
751 | .icon-neutral-2:before {
752 | content: "\e0ed";
753 | }
754 | .icon-wondering:before {
755 | content: "\e0ee";
756 | }
757 | .icon-wondering-2:before {
758 | content: "\e0ef";
759 | }
760 | .icon-point-up:before {
761 | content: "\e0f0";
762 | }
763 | .icon-point-right:before {
764 | content: "\e0f1";
765 | }
766 | .icon-point-down:before {
767 | content: "\e0f2";
768 | }
769 | .icon-point-left:before {
770 | content: "\e0f3";
771 | }
772 | .icon-warning:before {
773 | content: "\e0f4";
774 | }
775 | .icon-notification:before {
776 | content: "\e0f5";
777 | }
778 | .icon-question:before {
779 | content: "\e0f6";
780 | }
781 | .icon-info:before {
782 | content: "\e0f7";
783 | }
784 | .icon-info-2:before {
785 | content: "\e0f8";
786 | }
787 | .icon-blocked:before {
788 | content: "\e0f9";
789 | }
790 | .icon-cancel-circle:before {
791 | content: "\e0fa";
792 | }
793 | .icon-checkmark-circle:before {
794 | content: "\e0fb";
795 | }
796 | .icon-spam:before {
797 | content: "\e0fc";
798 | }
799 | .icon-close:before {
800 | content: "\e0fd";
801 | }
802 | .icon-checkmark:before {
803 | content: "\e0fe";
804 | }
805 | .icon-checkmark-2:before {
806 | content: "\e0ff";
807 | }
808 | .icon-spell-check:before {
809 | content: "\e100";
810 | }
811 | .icon-minus:before {
812 | content: "\e101";
813 | }
814 | .icon-plus:before {
815 | content: "\e102";
816 | }
817 | .icon-enter:before {
818 | content: "\e103";
819 | }
820 | .icon-exit:before {
821 | content: "\e104";
822 | }
823 | .icon-play-2:before {
824 | content: "\e105";
825 | }
826 | .icon-pause:before {
827 | content: "\e106";
828 | }
829 | .icon-stop:before {
830 | content: "\e107";
831 | }
832 | .icon-backward:before {
833 | content: "\e108";
834 | }
835 | .icon-forward-2:before {
836 | content: "\e109";
837 | }
838 | .icon-play-3:before {
839 | content: "\e10a";
840 | }
841 | .icon-pause-2:before {
842 | content: "\e10b";
843 | }
844 | .icon-stop-2:before {
845 | content: "\e10c";
846 | }
847 | .icon-backward-2:before {
848 | content: "\e10d";
849 | }
850 | .icon-forward-3:before {
851 | content: "\e10e";
852 | }
853 | .icon-first:before {
854 | content: "\e10f";
855 | }
856 | .icon-last:before {
857 | content: "\e110";
858 | }
859 | .icon-previous:before {
860 | content: "\e111";
861 | }
862 | .icon-next:before {
863 | content: "\e112";
864 | }
865 | .icon-eject:before {
866 | content: "\e113";
867 | }
868 | .icon-volume-high:before {
869 | content: "\e114";
870 | }
871 | .icon-volume-medium:before {
872 | content: "\e115";
873 | }
874 | .icon-volume-low:before {
875 | content: "\e116";
876 | }
877 | .icon-volume-mute:before {
878 | content: "\e117";
879 | }
880 | .icon-volume-mute-2:before {
881 | content: "\e118";
882 | }
883 | .icon-volume-increase:before {
884 | content: "\e119";
885 | }
886 | .icon-volume-decrease:before {
887 | content: "\e11a";
888 | }
889 | .icon-loop:before {
890 | content: "\e11b";
891 | }
892 | .icon-loop-2:before {
893 | content: "\e11c";
894 | }
895 | .icon-loop-3:before {
896 | content: "\e11d";
897 | }
898 | .icon-shuffle:before {
899 | content: "\e11e";
900 | }
901 | .icon-arrow-up-left:before {
902 | content: "\e11f";
903 | }
904 | .icon-arrow-up:before {
905 | content: "\e120";
906 | }
907 | .icon-arrow-up-right:before {
908 | content: "\e121";
909 | }
910 | .icon-arrow-right:before {
911 | content: "\e122";
912 | }
913 | .icon-arrow-down-right:before {
914 | content: "\e123";
915 | }
916 | .icon-arrow-down:before {
917 | content: "\e124";
918 | }
919 | .icon-arrow-down-left:before {
920 | content: "\e125";
921 | }
922 | .icon-arrow-left:before {
923 | content: "\e126";
924 | }
925 | .icon-arrow-up-left-2:before {
926 | content: "\e127";
927 | }
928 | .icon-arrow-up-2:before {
929 | content: "\e128";
930 | }
931 | .icon-arrow-up-right-2:before {
932 | content: "\e129";
933 | }
934 | .icon-arrow-right-2:before {
935 | content: "\e12a";
936 | }
937 | .icon-arrow-down-right-2:before {
938 | content: "\e12b";
939 | }
940 | .icon-arrow-down-2:before {
941 | content: "\e12c";
942 | }
943 | .icon-arrow-down-left-2:before {
944 | content: "\e12d";
945 | }
946 | .icon-arrow-left-2:before {
947 | content: "\e12e";
948 | }
949 | .icon-arrow-up-left-3:before {
950 | content: "\e12f";
951 | }
952 | .icon-arrow-up-3:before {
953 | content: "\e130";
954 | }
955 | .icon-arrow-up-right-3:before {
956 | content: "\e131";
957 | }
958 | .icon-arrow-right-3:before {
959 | content: "\e132";
960 | }
961 | .icon-arrow-down-right-3:before {
962 | content: "\e133";
963 | }
964 | .icon-arrow-down-3:before {
965 | content: "\e134";
966 | }
967 | .icon-arrow-down-left-3:before {
968 | content: "\e135";
969 | }
970 | .icon-arrow-left-3:before {
971 | content: "\e136";
972 | }
973 | .icon-tab:before {
974 | content: "\e137";
975 | }
976 | .icon-checkbox-checked:before {
977 | content: "\e138";
978 | }
979 | .icon-checkbox-unchecked:before {
980 | content: "\e139";
981 | }
982 | .icon-checkbox-partial:before {
983 | content: "\e13a";
984 | }
985 | .icon-radio-checked:before {
986 | content: "\e13b";
987 | }
988 | .icon-radio-unchecked:before {
989 | content: "\e13c";
990 | }
991 | .icon-crop:before {
992 | content: "\e13d";
993 | }
994 | .icon-scissors:before {
995 | content: "\e13e";
996 | }
997 | .icon-filter:before {
998 | content: "\e13f";
999 | }
1000 | .icon-filter-2:before {
1001 | content: "\e140";
1002 | }
1003 | .icon-font:before {
1004 | content: "\e141";
1005 | }
1006 | .icon-text-height:before {
1007 | content: "\e142";
1008 | }
1009 | .icon-text-width:before {
1010 | content: "\e143";
1011 | }
1012 | .icon-bold:before {
1013 | content: "\e144";
1014 | }
1015 | .icon-underline:before {
1016 | content: "\e145";
1017 | }
1018 | .icon-italic:before {
1019 | content: "\e146";
1020 | }
1021 | .icon-strikethrough:before {
1022 | content: "\e147";
1023 | }
1024 | .icon-omega:before {
1025 | content: "\e148";
1026 | }
1027 | .icon-sigma:before {
1028 | content: "\e149";
1029 | }
1030 | .icon-table:before {
1031 | content: "\e14a";
1032 | }
1033 | .icon-table-2:before {
1034 | content: "\e14b";
1035 | }
1036 | .icon-insert-template:before {
1037 | content: "\e14c";
1038 | }
1039 | .icon-pilcrow:before {
1040 | content: "\e14d";
1041 | }
1042 | .icon-left-to-right:before {
1043 | content: "\e14e";
1044 | }
1045 | .icon-right-to-left:before {
1046 | content: "\e14f";
1047 | }
1048 | .icon-paragraph-left:before {
1049 | content: "\e150";
1050 | }
1051 | .icon-paragraph-center:before {
1052 | content: "\e151";
1053 | }
1054 | .icon-paragraph-right:before {
1055 | content: "\e152";
1056 | }
1057 | .icon-paragraph-justify:before {
1058 | content: "\e153";
1059 | }
1060 | .icon-paragraph-left-2:before {
1061 | content: "\e154";
1062 | }
1063 | .icon-paragraph-center-2:before {
1064 | content: "\e155";
1065 | }
1066 | .icon-paragraph-right-2:before {
1067 | content: "\e156";
1068 | }
1069 | .icon-paragraph-justify-2:before {
1070 | content: "\e157";
1071 | }
1072 | .icon-indent-increase:before {
1073 | content: "\e158";
1074 | }
1075 | .icon-indent-decrease:before {
1076 | content: "\e159";
1077 | }
1078 | .icon-new-tab:before {
1079 | content: "\e15a";
1080 | }
1081 | .icon-embed:before {
1082 | content: "\e15b";
1083 | }
1084 | .icon-code:before {
1085 | content: "\e15c";
1086 | }
1087 | .icon-console:before {
1088 | content: "\e15d";
1089 | }
1090 | .icon-share:before {
1091 | content: "\e15e";
1092 | }
1093 | .icon-mail:before {
1094 | content: "\e15f";
1095 | }
1096 | .icon-mail-2:before {
1097 | content: "\e160";
1098 | }
1099 | .icon-mail-3:before {
1100 | content: "\e161";
1101 | }
1102 | .icon-mail-4:before {
1103 | content: "\e162";
1104 | }
1105 | .icon-google:before {
1106 | content: "\e163";
1107 | }
1108 | .icon-google-plus:before {
1109 | content: "\e164";
1110 | }
1111 | .icon-google-plus-2:before {
1112 | content: "\e165";
1113 | }
1114 | .icon-google-plus-3:before {
1115 | content: "\e166";
1116 | }
1117 | .icon-google-plus-4:before {
1118 | content: "\e167";
1119 | }
1120 | .icon-google-drive:before {
1121 | content: "\e168";
1122 | }
1123 | .icon-facebook:before {
1124 | content: "\e169";
1125 | }
1126 | .icon-facebook-2:before {
1127 | content: "\e16a";
1128 | }
1129 | .icon-facebook-3:before {
1130 | content: "\e16b";
1131 | }
1132 | .icon-instagram:before {
1133 | content: "\e16c";
1134 | }
1135 | .icon-twitter:before {
1136 | content: "\e16d";
1137 | }
1138 | .icon-twitter-2:before {
1139 | content: "\e16e";
1140 | }
1141 | .icon-twitter-3:before {
1142 | content: "\e16f";
1143 | }
1144 | .icon-feed-2:before {
1145 | content: "\e170";
1146 | }
1147 | .icon-feed-3:before {
1148 | content: "\e171";
1149 | }
1150 | .icon-feed-4:before {
1151 | content: "\e172";
1152 | }
1153 | .icon-youtube:before {
1154 | content: "\e173";
1155 | }
1156 | .icon-youtube-2:before {
1157 | content: "\e174";
1158 | }
1159 | .icon-vimeo:before {
1160 | content: "\e175";
1161 | }
1162 | .icon-vimeo2:before {
1163 | content: "\e176";
1164 | }
1165 | .icon-vimeo-2:before {
1166 | content: "\e177";
1167 | }
1168 | .icon-lanyrd:before {
1169 | content: "\e178";
1170 | }
1171 | .icon-flickr:before {
1172 | content: "\e179";
1173 | }
1174 | .icon-flickr-2:before {
1175 | content: "\e17a";
1176 | }
1177 | .icon-flickr-3:before {
1178 | content: "\e17b";
1179 | }
1180 | .icon-flickr-4:before {
1181 | content: "\e17c";
1182 | }
1183 | .icon-picassa:before {
1184 | content: "\e17d";
1185 | }
1186 | .icon-picassa-2:before {
1187 | content: "\e17e";
1188 | }
1189 | .icon-dribbble:before {
1190 | content: "\e17f";
1191 | }
1192 | .icon-dribbble-2:before {
1193 | content: "\e180";
1194 | }
1195 | .icon-dribbble-3:before {
1196 | content: "\e181";
1197 | }
1198 | .icon-forrst:before {
1199 | content: "\e182";
1200 | }
1201 | .icon-forrst-2:before {
1202 | content: "\e183";
1203 | }
1204 | .icon-deviantart:before {
1205 | content: "\e184";
1206 | }
1207 | .icon-deviantart-2:before {
1208 | content: "\e185";
1209 | }
1210 | .icon-steam:before {
1211 | content: "\e186";
1212 | }
1213 | .icon-steam-2:before {
1214 | content: "\e187";
1215 | }
1216 | .icon-github:before {
1217 | content: "\e188";
1218 | }
1219 | .icon-github-2:before {
1220 | content: "\e189";
1221 | }
1222 | .icon-github-3:before {
1223 | content: "\e18a";
1224 | }
1225 | .icon-github-4:before {
1226 | content: "\e18b";
1227 | }
1228 | .icon-github-5:before {
1229 | content: "\e18c";
1230 | }
1231 | .icon-wordpress:before {
1232 | content: "\e18d";
1233 | }
1234 | .icon-wordpress-2:before {
1235 | content: "\e18e";
1236 | }
1237 | .icon-joomla:before {
1238 | content: "\e18f";
1239 | }
1240 | .icon-blogger:before {
1241 | content: "\e190";
1242 | }
1243 | .icon-blogger-2:before {
1244 | content: "\e191";
1245 | }
1246 | .icon-tumblr:before {
1247 | content: "\e192";
1248 | }
1249 | .icon-tumblr-2:before {
1250 | content: "\e193";
1251 | }
1252 | .icon-yahoo:before {
1253 | content: "\e194";
1254 | }
1255 | .icon-tux:before {
1256 | content: "\e195";
1257 | }
1258 | .icon-apple:before {
1259 | content: "\e196";
1260 | }
1261 | .icon-finder:before {
1262 | content: "\e197";
1263 | }
1264 | .icon-android:before {
1265 | content: "\e198";
1266 | }
1267 | .icon-windows:before {
1268 | content: "\e199";
1269 | }
1270 | .icon-windows8:before {
1271 | content: "\e19a";
1272 | }
1273 | .icon-soundcloud:before {
1274 | content: "\e19b";
1275 | }
1276 | .icon-soundcloud-2:before {
1277 | content: "\e19c";
1278 | }
1279 | .icon-skype:before {
1280 | content: "\e19d";
1281 | }
1282 | .icon-reddit:before {
1283 | content: "\e19e";
1284 | }
1285 | .icon-linkedin:before {
1286 | content: "\e19f";
1287 | }
1288 | .icon-lastfm:before {
1289 | content: "\e1a0";
1290 | }
1291 | .icon-lastfm-2:before {
1292 | content: "\e1a1";
1293 | }
1294 | .icon-delicious:before {
1295 | content: "\e1a2";
1296 | }
1297 | .icon-stumbleupon:before {
1298 | content: "\e1a3";
1299 | }
1300 | .icon-stumbleupon-2:before {
1301 | content: "\e1a4";
1302 | }
1303 | .icon-stackoverflow:before {
1304 | content: "\e1a5";
1305 | }
1306 | .icon-pinterest:before {
1307 | content: "\e1a6";
1308 | }
1309 | .icon-pinterest-2:before {
1310 | content: "\e1a7";
1311 | }
1312 | .icon-xing:before {
1313 | content: "\e1a8";
1314 | }
1315 | .icon-xing-2:before {
1316 | content: "\e1a9";
1317 | }
1318 | .icon-flattr:before {
1319 | content: "\e1aa";
1320 | }
1321 | .icon-foursquare:before {
1322 | content: "\e1ab";
1323 | }
1324 | .icon-foursquare-2:before {
1325 | content: "\e1ac";
1326 | }
1327 | .icon-paypal:before {
1328 | content: "\e1ad";
1329 | }
1330 | .icon-paypal-2:before {
1331 | content: "\e1ae";
1332 | }
1333 | .icon-paypal-3:before {
1334 | content: "\e1af";
1335 | }
1336 | .icon-yelp:before {
1337 | content: "\e1b0";
1338 | }
1339 | .icon-libreoffice:before {
1340 | content: "\e1b1";
1341 | }
1342 | .icon-file-pdf:before {
1343 | content: "\e1b2";
1344 | }
1345 | .icon-file-openoffice:before {
1346 | content: "\e1b3";
1347 | }
1348 | .icon-file-word:before {
1349 | content: "\e1b4";
1350 | }
1351 | .icon-file-excel:before {
1352 | content: "\e1b5";
1353 | }
1354 | .icon-file-zip:before {
1355 | content: "\e1b6";
1356 | }
1357 | .icon-file-powerpoint:before {
1358 | content: "\e1b7";
1359 | }
1360 | .icon-file-xml:before {
1361 | content: "\e1b8";
1362 | }
1363 | .icon-file-css:before {
1364 | content: "\e1b9";
1365 | }
1366 | .icon-html5:before {
1367 | content: "\e1ba";
1368 | }
1369 | .icon-html5-2:before {
1370 | content: "\e1bb";
1371 | }
1372 | .icon-css3:before {
1373 | content: "\e1bc";
1374 | }
1375 | .icon-chrome:before {
1376 | content: "\e1bd";
1377 | }
1378 | .icon-firefox:before {
1379 | content: "\e1be";
1380 | }
1381 | .icon-IE:before {
1382 | content: "\e1bf";
1383 | }
1384 | .icon-opera:before {
1385 | content: "\e1c0";
1386 | }
1387 | .icon-safari:before {
1388 | content: "\e1c1";
1389 | }
1390 | .icon-IcoMoon:before {
1391 | content: "\e1c2";
1392 | }
1393 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | loda
5 |
6 |
7 |
8 |
9 |
58 |
59 |
60 |
61 | loda-button
62 | jQuery plugin that animates the button icon with CCS3 when loading ...
63 |
64 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
161 |
162 |
163 |
--------------------------------------------------------------------------------
/loda-button.css:
--------------------------------------------------------------------------------
1 | /* OVERRIDABLE */
2 |
3 | .loda-btn, .loda-btn:visited {
4 | background: #E5E6E6;
5 | text-decoration: none;
6 | color: #FF7676;
7 | padding: 1em 1em 1em 2.6em;
8 | border-radius: .3em;
9 | -webkit-border-radius: .3em;
10 | -moz-border-radius: .3em;
11 | -ms-border-radius: .3em;
12 | -o-border-radius: .3em;
13 | }
14 |
15 | .loda-btn.loda-btn-loading {
16 | color: #bbb;
17 | cursor: default;
18 | }
19 |
20 | .loda-btn.loda-btn-loading .loda-icon {
21 | color: #bbb;
22 | }
23 |
24 | .loda-btn .loda-icon {
25 | top: 1em;
26 | left: 1em;
27 | }
28 |
29 | /* NOT OVERRIDABLE */
30 |
31 | .loda-btn, .loda-btn:visited {
32 | position: relative;
33 | display: inline-block;
34 | }
35 |
36 | .loda-btn .loda-icon {
37 | position: absolute;
38 |
39 | -webkit-transition: -webkit-transform .3s;
40 | -moz-transition: -moz-transform .3s;
41 | -ms-transition: -moz-transform .3s;
42 | -o-transition: -o-transform .3s;
43 | transition: transform .3s;
44 | -webkit-transform-style: preserve-3d;
45 | -moz-transform-style: preserve-3d;
46 | -ms-transform-style: preserve-3d;
47 | -o-transform-style: preserve-3d;
48 | transform-style: preserve-3d;
49 | }
50 |
51 | .loda-btn.loda-btn-loading .loda-icon {
52 | animation: loda-anim .5s infinite linear;
53 | -webkit-animation: loda-anim .5s infinite linear alternate;
54 | -moz-animation: loda-anim .5s infinite linear alternate;
55 | -ms-animation: loda-anim .5s infinite linear alternate;
56 | -o-animation: loda-anim .5s infinite linear alternate;
57 | }
58 |
59 | @keyframes loda-anim {
60 | from { -webkit-transform: rotateY(1deg); }
61 | to { -webkit-transform: rotateY(179deg); }
62 | }
63 |
64 | @-moz-keyframes loda-anim {
65 | from { -moz-transform: rotateY(1deg); }
66 | to { -moz-transform: rotateY(179deg); }
67 | }
68 |
69 | @-webkit-keyframes loda-anim {
70 | from { -webkit-transform: rotateY(1deg); }
71 | to { -webkit-transform: rotateY(179deg); }
72 | }
73 |
74 | @-ms-keyframes loda-anim {
75 | from { -ms-transform: rotateY(1deg); }
76 | to { -ms-transform: rotateY(179deg); }
77 | }
78 |
79 | @-o-keyframes loda-anim {
80 | from { -o-transform: rotateY(1deg); }
81 | to { -o-transform: rotateY(179deg); }
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/loda-button.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 |
3 | var methods = {
4 | start: function () {
5 | var loda = getData(this);
6 | if (loda) loda.start();
7 | },
8 |
9 | stop: function () {
10 | var loda = getData(this);
11 | if (loda) loda.stop();
12 | }
13 | },
14 |
15 | getData = function(el) {
16 | return el.data('loda-button-data');
17 | },
18 |
19 | setData = function(el, data) {
20 | el.data('loda-button-data', data);
21 | },
22 |
23 | LodaButton = function(element) {
24 | this._element = element;
25 | this._jelement = $(element);
26 |
27 | if (getData(this._jelement)) return;
28 | setData(this._jelement, this);
29 | };
30 |
31 | LodaButton.prototype = {
32 | start: function() {
33 | this._jelement.addClass('loda-btn-loading');
34 | },
35 |
36 | stop: function() {
37 | this._jelement.removeClass('loda-btn-loading');
38 | }
39 | };
40 |
41 |
42 | $.fn.lodaButton = function(options) {
43 |
44 | if (methods[options]) {
45 | return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
46 | } else if (typeof options === 'object' || !options) {
47 | return this.each(function() {
48 | new LodaButton(this);
49 | return this;
50 | });
51 | } else {
52 | $.error( 'Method ' + options + ' does not exist on lodaButton' );
53 | }
54 |
55 | };
56 |
57 | }(jQuery));
--------------------------------------------------------------------------------