CSS3: Loading Spinners Using CSS3 Animations
Facebook Loader
|
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 |
/* CSS style */ .container { border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; float: left; height: 240px; overflow: hidden; position: relative; width: 240px; } .loader, .loader:before, .loader:after { background: #0074a2; -webkit-animation: facebook 1s infinite ease-in-out; animation: facebook 1s infinite ease-in-out; width: 1em; height: 4em; } .loader:before, .loader:after { position: absolute; top: 0; content: ''; } .loader:before { left: -1.5em; } .loader { text-indent: -9999em; margin: 8em auto; position: relative; font-size: 11px; -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:after { left: 1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } @-webkit-keyframes facebook { 0%, 80%, 100% { box-shadow: 0 0 #0074a2; height: 4em; } 40% { box-shadow: 0 -2em #0074a2; height: 5em; } } @keyframes facebook { 0%, 80%, 100% { box-shadow: 0 0 #0074a2; height: 4em; } 40% { box-shadow: 0 -2em #0074a2; height: 5em; } } /* HTML Structure */ <div class="container facebook"> <div class="loader">Loading...</div> </div> |
Loader 2
|
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 |
/* CSS3 Style */ .container { border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; float: left; height: 240px; overflow: hidden; position: relative; width: 240px; } .loader, .loader:before, .loader:after { border-radius: 50%; } .loader:before, .loader:after { position: absolute; content: ''; } .loader:before { width: 5.2em; height: 10.2em; background: #fff; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 5.2em 5.1em; transform-origin: 5.2em 5.1em; -webkit-animation: loader2 2s infinite ease 1.5s; animation: loader2 2s infinite ease 1.5s; } .loader { font-size: 11px; text-indent: -99999em; margin: 5em auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em #0dcecb; } .loader:after { width: 5.2em; height: 10.2em; background: #fff; border-radius: 0 10.2em 10.2em 0; top: -0.1em; left: 5.1em; -webkit-transform-origin: 0px 5.1em; transform-origin: 0px 5.1em; -webkit-animation: loader2 2s infinite ease; animation: loader2 2s infinite ease; } @-webkit-keyframes loader2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* HTML Structure */ <div class="container loader2"> <div class="loader">Loading...</div> </div> |
Loader 3
|
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 |
/* CSS3 Style */ .container { border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; float: left; height: 240px; overflow: hidden; position: relative; width: 240px; } .loader { font-size: 10px; margin: 5em auto; text-indent: -9999em; width: 11em; height: 11em; border-radius: 50%; background: #0dcecb; background: -moz-linear-gradient(left, #0dcecb 10%, rgba(255, 255, 255, 0) 42%); background: -webkit-linear-gradient(left, #0dcecb 10%, rgba(255, 255, 255, 0) 42%); background: -o-linear-gradient(left, #0dcecb 10%, rgba(255, 255, 255, 0) 42%); background: -ms-linear-gradient(left, #0dcecb 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, #0dcecb 10%, rgba(255, 255, 255, 0) 42%); position: relative; -webkit-animation: loader3 1.4s infinite linear; animation: loader3 1.4s infinite linear; } .loader:before { width: 50%; height: 50%; background: #0dcecb; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .loader:after { background: #ffffff; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes loader3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* HTML Structure */ <div class="container loader3"> <div class="loader">Loading...</div> </div> |
