Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a Gif image.
Demo:
HTML:
|
1 2 3 4 5 |
<div class="loader"> <span></span> <span></span> <span></span> </div> |
CSS3:
|
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 |
.loader { text-align: center; } .loader span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: black; border-radius: 50px; -webkit-animation: loader 0.9s infinite alternate; -moz-animation: loader 0.9s infinite alternate; } .loader span:nth-of-type(2) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; } .loader span:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; } @-webkit-keyframes loader { 0% { width: 10px; height: 10px; opacity: 0.9; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -webkit-transform: translateY(-21px); } } @-moz-keyframes loader { 0% { width: 10px; height: 10px; opacity: 0.9; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -moz-transform: translateY(-21px); } } |
Post Revisions:
- 15 oktober 2014 @ 13:24 [Huidige revisie] by Dave Zoontjes
- 15 oktober 2014 @ 13:24 by Dave Zoontjes
- 15 augustus 2014 @ 12:41 by Dave Zoontjes
- 15 augustus 2014 @ 12:39 by Dave Zoontjes
- 15 augustus 2014 @ 12:38 by Dave Zoontjes
- 15 juli 2014 @ 13:27 by Dave Zoontjes
Handige snippet thanks
Snippet komt goed van pas, jippie
Handige snippet, thanks
Handige snippputtt, ty bro.