Last active
March 29, 2020 13:51
-
-
Save thexmanxyz/f87d2f65250f6d8d67aeef92d0c0942d to your computer and use it in GitHub Desktop.
CSS-Loader - Pure CSS loader - all 8 and small versions (CSS and SCSS) - credits @ https://github.com/lukehaas/css-loaders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* All 8 CSS-Loader (plus small version for each) pure CSS loaders in one file */ | |
| /* Uses black on white and not white on turquise like the original */ | |
| /* Add <div class="load1 loader">Loading...</div> to your HTML markup */ | |
| /* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */ | |
| /* credits @ https://github.com/lukehaas/css-loaders */ | |
| /* load1 */ | |
| .async-gmaps-spinner.load1.loader, | |
| .async-gmaps-spinner.load1-small.loader, | |
| .async-gmaps-spinner.load1.loader:before, | |
| .async-gmaps-spinner.load1-small.loader:before, | |
| .async-gmaps-spinner.load1.loader:after, | |
| .async-gmaps-spinner.load1-small.loader:after { | |
| background: #000; | |
| -webkit-animation: load1 1s infinite ease-in-out; | |
| animation: load1 1s infinite ease-in-out; | |
| width: 1em; | |
| height: 4em; | |
| } | |
| .async-gmaps-spinner.load1.loader, | |
| .async-gmaps-spinner.load1-small.loader { | |
| color: #000; | |
| text-indent: -9999em; | |
| margin: 88px auto; | |
| position: relative; | |
| font-size: 11px; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation-delay: -0.16s; | |
| animation-delay: -0.16s; | |
| } | |
| .async-gmaps-spinner.load1.loader:before, | |
| .async-gmaps-spinner.load1-small.loader:before, | |
| .async-gmaps-spinner.load1.loader:after, | |
| .async-gmaps-spinner.load1-small.loader:after { | |
| position: absolute; | |
| top: 0; | |
| content: ''; | |
| } | |
| .async-gmaps-spinner.load1.loader:before, | |
| .async-gmaps-spinner.load1-small.loader:before { | |
| left: -1.5em; | |
| -webkit-animation-delay: -0.32s; | |
| animation-delay: -0.32s; | |
| } | |
| .async-gmaps-spinner.load1.loader:after, | |
| .async-gmaps-spinner.load1-small.loader:after { | |
| left: 1.5em; | |
| } | |
| /* load1-small */ | |
| .async-gmaps-spinner.load1-small.loader, | |
| .async-gmaps-spinner.load1-small.loader:before, | |
| .async-gmaps-spinner.load1-small.loader:after { | |
| width: 0.75em; | |
| } | |
| .async-gmaps-spinner.load1-small.loader { | |
| font-size: 6px; | |
| } | |
| /* load2 */ | |
| .async-gmaps-spinner.load2.loader, | |
| .async-gmaps-spinner.load2-small.loader, | |
| .async-gmaps-spinner.load2.loader:before, | |
| .async-gmaps-spinner.load2-small.loader:before, | |
| .async-gmaps-spinner.load2.loader:after, | |
| .async-gmaps-spinner.load2-small.loader:after { | |
| border-radius: 50%; | |
| } | |
| .async-gmaps-spinner.load2.loader, | |
| .async-gmaps-spinner.load2-small.loader { | |
| color: #000; | |
| font-size: 11px; | |
| text-indent: -99999em; | |
| margin: 55px auto; | |
| position: relative; | |
| width: 10em; | |
| height: 10em; | |
| box-shadow: inset 0 0 0 1em; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| .async-gmaps-spinner.load2.loader:before, | |
| .async-gmaps-spinner.load2-small.loader:before, | |
| .async-gmaps-spinner.load2.loader:after, | |
| .async-gmaps-spinner.load2-small.loader:after { | |
| position: absolute; | |
| content: ''; | |
| } | |
| .async-gmaps-spinner.load2.loader:before, | |
| .async-gmaps-spinner.load2-small.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.1em 5.1em; | |
| transform-origin: 5.1em 5.1em; | |
| -webkit-animation: load2 2s infinite ease 1.5s; | |
| animation: load2 2s infinite ease 1.5s; | |
| } | |
| .async-gmaps-spinner.load2.loader:after, | |
| .async-gmaps-spinner.load2-small.loader:after { | |
| width: 5.2em; | |
| height: 10.2em; | |
| background: #fff; | |
| border-radius: 0 10.2em 10.2em 0; | |
| top: -0.1em; | |
| left: 4.9em; | |
| -webkit-transform-origin: 0.1em 5.1em; | |
| transform-origin: 0.1em 5.1em; | |
| -webkit-animation: load2 2s infinite ease; | |
| animation: load2 2s infinite ease; | |
| } | |
| /* load2-small */ | |
| .async-gmaps-spinner.load2-small.loader { | |
| font-size: 8px; | |
| } | |
| /* load3 */ | |
| .async-gmaps-spinner.load3.loader, | |
| .async-gmaps-spinner.load3-small.loader { | |
| font-size: 10px; | |
| margin: 50px auto; | |
| text-indent: -9999em; | |
| width: 11em; | |
| height: 11em; | |
| border-radius: 50%; | |
| background: #000; | |
| background: -moz-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); | |
| background: -webkit-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); | |
| background: -o-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); | |
| background: -ms-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); | |
| background: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 42%); | |
| position: relative; | |
| -webkit-animation: load3 1.4s infinite linear; | |
| animation: load3 1.4s infinite linear; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| .async-gmaps-spinner.load3.loader:before, | |
| .async-gmaps-spinner.load3-small.loader:before { | |
| width: 50%; | |
| height: 50%; | |
| background: #000; | |
| border-radius: 100% 0 0 0; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| content: ''; | |
| } | |
| .async-gmaps-spinner.load3.loader:after, | |
| .async-gmaps-spinner.load3-small.loader:after { | |
| background: #fff; | |
| width: 75%; | |
| height: 75%; | |
| border-radius: 50%; | |
| content: ''; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| /* load3-small */ | |
| .async-gmaps-spinner.load3-small.loader { | |
| width: 5.5em; | |
| height: 5.5em; | |
| } | |
| /* load4 */ | |
| .async-gmaps-spinner.load4.loader, | |
| .async-gmaps-spinner.load4-small.loader { | |
| color: #000; | |
| font-size: 20px; | |
| margin: 100px auto; | |
| width: 1em; | |
| height: 1em; | |
| border-radius: 50%; | |
| position: relative; | |
| text-indent: -9999em; | |
| -webkit-animation: load4 1.3s infinite linear; | |
| animation: load4 1.3s infinite linear; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| /* load4-small */ | |
| .async-gmaps-spinner.load4-small.loader { | |
| font-size: 10px; | |
| width: 0.75em; | |
| height: 0.75em; | |
| } | |
| /* load5 */ | |
| .async-gmaps-spinner.load5.loader, | |
| .async-gmaps-spinner.load5-small.loader { | |
| margin: 100px auto; | |
| font-size: 25px; | |
| width: 1em; | |
| height: 1em; | |
| border-radius: 50%; | |
| position: relative; | |
| text-indent: -9999em; | |
| -webkit-animation: load5 1.1s infinite ease; | |
| animation: load5 1.1s infinite ease; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| /* load5-small */ | |
| .async-gmaps-spinner.load5-small.loader { | |
| font-size: 13px; | |
| width: 0.75em; | |
| height: 0.75em; | |
| } | |
| /* load6 */ | |
| .async-gmaps-spinner.load6.loader, | |
| .async-gmaps-spinner.load6-small.loader { | |
| color: #000; | |
| font-size: 90px; | |
| text-indent: -9999em; | |
| overflow: hidden; | |
| width: 1em; | |
| height: 1em; | |
| border-radius: 50%; | |
| margin: 72px auto; | |
| position: relative; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; | |
| animation: load6 1.7s infinite ease, round 1.7s infinite ease; | |
| } | |
| /* load6-small */ | |
| .async-gmaps-spinner.load6-small.loader { | |
| font-size: 45px; | |
| } | |
| /* load7 */ | |
| .async-gmaps-spinner.load7.loader, | |
| .async-gmaps-spinner.load7-small.loader, | |
| .async-gmaps-spinner.load7.loader:before, | |
| .async-gmaps-spinner.load7-small.loader:before, | |
| .async-gmaps-spinner.load7.loader:after, | |
| .async-gmaps-spinner.load7-small.loader:after { | |
| border-radius: 50%; | |
| width: 2.5em; | |
| height: 2.5em; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation: load7 1.8s infinite ease-in-out; | |
| animation: load7 1.8s infinite ease-in-out; | |
| } | |
| .async-gmaps-spinner.load7.loader, | |
| .async-gmaps-spinner.load7-small.loader { | |
| color: #000; | |
| font-size: 10px; | |
| margin: 80px auto; | |
| position: relative; | |
| text-indent: -9999em; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation-delay: -0.16s; | |
| animation-delay: -0.16s; | |
| } | |
| .async-gmaps-spinner.load7.loader:before, | |
| .async-gmaps-spinner.load7-small.loader:before, | |
| .async-gmaps-spinner.load7.loader:after, | |
| .async-gmaps-spinner.load7-small.loader:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .async-gmaps-spinner.load7.loader:before, | |
| .async-gmaps-spinner.load7-small.loader:before { | |
| left: -3.5em; | |
| -webkit-animation-delay: -0.32s; | |
| animation-delay: -0.32s; | |
| } | |
| .async-gmaps-spinner.load7.loader:after, | |
| .async-gmaps-spinner.load7-small.loader:after { | |
| left: 3.5em; | |
| } | |
| /* load7-small */ | |
| .async-gmaps-spinner.load7-small.loader { | |
| font-size: 5px; | |
| } | |
| /* load8 */ | |
| .async-gmaps-spinner.load8.loader, | |
| .async-gmaps-spinner.load8-small.loader, | |
| .async-gmaps-spinner.load8.loader:after, | |
| .async-gmaps-spinner.load8-small.loader:after { | |
| border-radius: 50%; | |
| width: 10em; | |
| height: 10em; | |
| } | |
| .async-gmaps-spinner.load8.loader, | |
| .async-gmaps-spinner.load8-small.loader { | |
| margin: 60px auto; | |
| font-size: 10px; | |
| position: relative; | |
| text-indent: -9999em; | |
| border-top: 1.1em solid rgba(255, 255, 255, 0.2); | |
| border-right: 1.1em solid rgba(255, 255, 255, 0.2); | |
| border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); | |
| border-left: 1.1em solid #000; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation: load8 1.1s infinite linear; | |
| animation: load8 1.1s infinite linear; | |
| } | |
| /* load8-small */ | |
| .async-gmaps-spinner.load8-small.loader { | |
| font-size: 5px; | |
| } | |
| /* CSS-Loader CSS spinner animations */ | |
| /* load1 */ | |
| @-webkit-keyframes load1 { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow: 0 0; | |
| height: 4em; | |
| } | |
| 40% { | |
| box-shadow: 0 -2em; | |
| height: 5em; | |
| } | |
| } | |
| @keyframes load1 { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow: 0 0; | |
| height: 4em; | |
| } | |
| 40% { | |
| box-shadow: 0 -2em; | |
| height: 5em; | |
| } | |
| } | |
| /* load2 */ | |
| @-webkit-keyframes load2 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes load2 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* load3 */ | |
| @-webkit-keyframes load3 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes load3 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* load4 */ | |
| @-webkit-keyframes load4 { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; | |
| } | |
| 12.5% { | |
| box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 25% { | |
| box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 37.5% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 50% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 62.5% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; | |
| } | |
| 75% { | |
| box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; | |
| } | |
| 87.5% { | |
| box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; | |
| } | |
| } | |
| @keyframes load4 { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; | |
| } | |
| 12.5% { | |
| box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 25% { | |
| box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 37.5% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 50% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; | |
| } | |
| 62.5% { | |
| box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; | |
| } | |
| 75% { | |
| box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; | |
| } | |
| 87.5% { | |
| box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; | |
| } | |
| } | |
| /* load5 */ | |
| @-webkit-keyframes load5 { | |
| 0%, | |
| 100% { | |
| box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7); | |
| } | |
| 12.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5); | |
| } | |
| 25% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 37.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 50% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 62.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 75% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 87.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000; | |
| } | |
| } | |
| @keyframes load5 { | |
| 0%, | |
| 100% { | |
| box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7); | |
| } | |
| 12.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5); | |
| } | |
| 25% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 37.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 50% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 62.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 75% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2); | |
| } | |
| 87.5% { | |
| box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000; | |
| } | |
| } | |
| /* load6 */ | |
| @-webkit-keyframes load6 { | |
| 0% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| 5%, | |
| 95% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| 10%, | |
| 59% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; | |
| } | |
| 20% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; | |
| } | |
| 38% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; | |
| } | |
| 100% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| } | |
| @keyframes load6 { | |
| 0% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| 5%, | |
| 95% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| 10%, | |
| 59% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; | |
| } | |
| 20% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; | |
| } | |
| 38% { | |
| box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; | |
| } | |
| 100% { | |
| box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; | |
| } | |
| } | |
| @-webkit-keyframes round { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes round { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* load7 */ | |
| @-webkit-keyframes load7 { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow: 0 2.5em 0 -1.3em; | |
| } | |
| 40% { | |
| box-shadow: 0 2.5em 0 0; | |
| } | |
| } | |
| @keyframes load7 { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow: 0 2.5em 0 -1.3em; | |
| } | |
| 40% { | |
| box-shadow: 0 2.5em 0 0; | |
| } | |
| } | |
| /* load8 */ | |
| @-webkit-keyframes load8 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes load8 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* All 8 CSS-Loader (plus small version for each) pure CSS loaders in one file, combined with $primary using e.g. template primary-color */ | |
| /* Uses black on white and not white on turquise like the original (but customizable) */ | |
| /* Add <div class="load1 loader">Loading...</div> to your HTML markup */ | |
| /* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */ | |
| /* credits @ https://github.com/lukehaas/css-loaders */ | |
| $primary: #000 !default; | |
| $background: #fff !default; | |
| /* load1 */ | |
| &.load1, &.load1-small { | |
| &.loader, | |
| &.loader:before, | |
| &.loader:after { | |
| background:$primary; | |
| -webkit-animation:load1 1s infinite ease-in-out; | |
| animation:load1 1s infinite ease-in-out; | |
| width:1em; | |
| height:4em; | |
| } | |
| &.loader { | |
| color:$primary; | |
| text-indent:-9999em; | |
| margin:88px auto; | |
| position:relative; | |
| font-size:11px; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation-delay:-0.16s; | |
| animation-delay:-0.16s; | |
| &:before, | |
| &:after { | |
| position:absolute; | |
| top:0; | |
| content:''; | |
| } | |
| &:before { | |
| left:-1.5em; | |
| -webkit-animation-delay:-0.32s; | |
| animation-delay:-0.32s; | |
| } | |
| &:after { | |
| left:1.5em; | |
| } | |
| } | |
| } | |
| /* load1-small */ | |
| &.load1-small { | |
| &.loader, | |
| &.loader:before, | |
| &.loader:after { | |
| width:0.75em; | |
| } | |
| &.loader { | |
| font-size:6px; | |
| } | |
| } | |
| /* load2 */ | |
| &.load2, &.load2-small { | |
| &.loader, | |
| &.loader:before, | |
| &.loader:after { | |
| border-radius:50%; | |
| } | |
| &.loader { | |
| color:$primary; | |
| font-size:11px; | |
| text-indent:-99999em; | |
| margin:55px auto; | |
| position:relative; | |
| width:10em; | |
| height:10em; | |
| box-shadow: inset 0 0 0 1em; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| &:before, | |
| &:after { | |
| position:absolute; | |
| content:''; | |
| } | |
| &:before { | |
| width:5.2em; | |
| height:10.2em; | |
| background: $background; | |
| border-radius: 10.2em 0 0 10.2em; | |
| top:-0.1em; | |
| left:-0.1em; | |
| -webkit-transform-origin:5.1em 5.1em; | |
| transform-origin:5.1em 5.1em; | |
| -webkit-animation:load2 2s infinite ease 1.5s; | |
| animation:load2 2s infinite ease 1.5s; | |
| } | |
| &:after { | |
| width:5.2em; | |
| height:10.2em; | |
| background: $background; | |
| border-radius: 0 10.2em 10.2em 0; | |
| top:-0.1em; | |
| left:4.9em; | |
| -webkit-transform-origin:0.1em 5.1em; | |
| transform-origin:0.1em 5.1em; | |
| -webkit-animation:load2 2s infinite ease; | |
| animation:load2 2s infinite ease; | |
| } | |
| } | |
| } | |
| /* load2-small */ | |
| &.load2-small { | |
| &.loader { | |
| font-size:8px; | |
| } | |
| } | |
| /* load3 */ | |
| &.load3, &.load3-small { | |
| &.loader { | |
| font-size:10px; | |
| margin:50px auto; | |
| text-indent:-9999em; | |
| width:11em; | |
| height:11em; | |
| border-radius:50%; | |
| background: $primary; | |
| background: -moz-linear-gradient(left, rgba($primary,1) 10%, rgba($primary,0) 42%); | |
| background: -webkit-linear-gradient(left, rgba($primary,1) 10%,rgba($primary,0) 42%); | |
| background: -o-linear-gradient(left, rgba($primary,1) 10%,rgba($primary,0) 42%); | |
| background: -ms-linear-gradient(left, rgba($primary,1) 10%,rgba($primary,0) 42%); | |
| background: linear-gradient(to right, rgba($primary,1) 10%,rgba($primary,0) 42%); | |
| position: relative; | |
| -webkit-animation:load3 1.4s infinite linear; | |
| animation:load3 1.4s infinite linear; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| &:before { | |
| width:50%; | |
| height:50%; | |
| background: $primary; | |
| border-radius: 100% 0 0 0; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| content:''; | |
| } | |
| &:after { | |
| background:$background; | |
| width:75%; | |
| height:75%; | |
| border-radius:50%; | |
| content:''; | |
| margin:auto; | |
| position: absolute; | |
| top: 0; left: 0; bottom: 0; right: 0; | |
| } | |
| } | |
| } | |
| /* load3-small */ | |
| &.load3-small { | |
| &.loader { | |
| width:5.5em; | |
| height:5.5em; | |
| } | |
| } | |
| /* load4 */ | |
| &.load4, &.load4-small { | |
| &.loader { | |
| color:$primary; | |
| font-size:20px; | |
| margin:100px auto; | |
| width:1em; | |
| height:1em; | |
| border-radius:50%; | |
| position:relative; | |
| text-indent:-9999em; | |
| -webkit-animation:load4 1.3s infinite linear; | |
| animation:load4 1.3s infinite linear; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| } | |
| /* load4-small */ | |
| &.load4-small { | |
| &.loader { | |
| font-size:10px; | |
| width:0.75em; | |
| height:0.75em; | |
| } | |
| } | |
| /* load5 */ | |
| &.load5, &.load5-small { | |
| &.loader { | |
| margin:100px auto; | |
| font-size:25px; | |
| width:1em; | |
| height:1em; | |
| border-radius:50%; | |
| position:relative; | |
| text-indent:-9999em; | |
| -webkit-animation:load5 1.1s infinite ease; | |
| animation:load5 1.1s infinite ease; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| } | |
| /* load5-small */ | |
| &.load5-small { | |
| &.loader { | |
| font-size:13px; | |
| width:0.75em; | |
| height:0.75em; | |
| } | |
| } | |
| /* load6 */ | |
| &.load6, &.load6-small { | |
| &.loader { | |
| color:$primary; | |
| font-size:90px; | |
| text-indent:-9999em; | |
| overflow: hidden; | |
| width:1em; | |
| height:1em; | |
| border-radius:50%; | |
| margin:72px auto; | |
| position:relative; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation:load6 1.7s infinite ease; | |
| animation:load6 1.7s infinite ease; | |
| } | |
| } | |
| /* load6-small */ | |
| &.load6-small { | |
| &.loader { | |
| font-size:45px; | |
| } | |
| } | |
| /* load7 */ | |
| &.load7, &.load7-small { | |
| &.loader, | |
| &.loader:before, | |
| &.loader:after { | |
| border-radius:50%; | |
| width:2.5em; | |
| height:2.5em; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation:load7 1.8s infinite ease-in-out; | |
| animation:load7 1.8s infinite ease-in-out; | |
| } | |
| &.loader { | |
| color:$primary; | |
| font-size:10px; | |
| margin:80px auto; | |
| position:relative; | |
| text-indent:-9999em; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation-delay:-0.16s; | |
| animation-delay:-0.16s; | |
| &:before, | |
| &:after { | |
| content:''; | |
| position:absolute; | |
| top:0; | |
| } | |
| &:before { | |
| left:-3.5em; | |
| -webkit-animation-delay:-0.32s; | |
| animation-delay:-0.32s; | |
| } | |
| &:after { | |
| left:3.5em; | |
| } | |
| } | |
| } | |
| /* load7-small */ | |
| &.load7-small { | |
| &.loader { | |
| font-size:5px; | |
| } | |
| } | |
| /* load8 */ | |
| &.load8, &.load8-small { | |
| &.loader, | |
| &.loader:after { | |
| border-radius:50%; | |
| width:10em; | |
| height:10em; | |
| } | |
| &.loader { | |
| margin:60px auto; | |
| font-size:10px; | |
| position:relative; | |
| text-indent:-9999em; | |
| border-top:1.1em solid rgba($primary,0.2); | |
| border-right:1.1em solid rgba($primary,0.2); | |
| border-bottom:1.1em solid rgba($primary,0.2); | |
| border-left:1.1em solid rgba($primary,1); | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation:load8 1.1s infinite linear; | |
| animation:load8 1.1s infinite linear; | |
| } | |
| } | |
| /* load8-small */ | |
| &.load8-small { | |
| &.loader { | |
| font-size:5px; | |
| } | |
| } | |
| /* load1 */ | |
| @mixin load1-frames { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow:0 0; | |
| height:4em; | |
| } | |
| 40% { | |
| box-shadow:0 -2em; | |
| height:5em; | |
| } | |
| } | |
| @-webkit-keyframes load1 {@include load1-frames;} | |
| @keyframes load1 {@include load1-frames;} | |
| /* load2 */ | |
| @mixin load2-frames() { | |
| 0% { | |
| -webkit-transform:rotate(0deg); | |
| transform:rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform:rotate(360deg); | |
| transform:rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes load2 {@include load2-frames;} | |
| @keyframes load2 {@include load2-frames;} | |
| /* load3 */ | |
| @mixin load3-frames() { | |
| 0% { | |
| -webkit-transform:rotate(0deg); | |
| transform:rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform:rotate(360deg); | |
| transform:rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes load3 {@include load3-frames;} | |
| @keyframes load3 {@include load3-frames;} | |
| /* load4 */ | |
| @mixin load4-frames() { | |
| 0%, | |
| 100% { | |
| box-shadow:0 -3em 0 0.2em, | |
| 2em -2em 0 0em, | |
| 3em 0 0 -1em, | |
| 2em 2em 0 -1em, | |
| 0 3em 0 -1em, | |
| -2em 2em 0 -1em, | |
| -3em 0 0 -1em, | |
| -2em -2em 0 0; | |
| } | |
| 12.5% { | |
| box-shadow:0 -3em 0 0, | |
| 2em -2em 0 0.2em, | |
| 3em 0 0 0, | |
| 2em 2em 0 -1em, | |
| 0 3em 0 -1em, | |
| -2em 2em 0 -1em, | |
| -3em 0 0 -1em, | |
| -2em -2em 0 -1em; | |
| } | |
| 25% { | |
| box-shadow:0 -3em 0 -0.5em, | |
| 2em -2em 0 0, | |
| 3em 0 0 0.2em, | |
| 2em 2em 0 0, | |
| 0 3em 0 -1em, | |
| -2em 2em 0 -1em, | |
| -3em 0 0 -1em, | |
| -2em -2em 0 -1em; | |
| } | |
| 37.5% { | |
| box-shadow:0 -3em 0 -1em, | |
| 2em -2em 0 -1em, | |
| 3em 0em 0 0, | |
| 2em 2em 0 0.2em, | |
| 0 3em 0 0em, | |
| -2em 2em 0 -1em, | |
| -3em 0em 0 -1em, | |
| -2em -2em 0 -1em; | |
| } | |
| 50% { | |
| box-shadow:0 -3em 0 -1em, | |
| 2em -2em 0 -1em, | |
| 3em 0 0 -1em, | |
| 2em 2em 0 0em, | |
| 0 3em 0 0.2em, | |
| -2em 2em 0 0, | |
| -3em 0em 0 -1em, | |
| -2em -2em 0 -1em; | |
| } | |
| 62.5% { | |
| box-shadow:0 -3em 0 -1em, | |
| 2em -2em 0 -1em, | |
| 3em 0 0 -1em, | |
| 2em 2em 0 -1em, | |
| 0 3em 0 0, | |
| -2em 2em 0 0.2em, | |
| -3em 0 0 0, | |
| -2em -2em 0 -1em; | |
| } | |
| 75% { | |
| box-shadow:0em -3em 0 -1em, | |
| 2em -2em 0 -1em, | |
| 3em 0em 0 -1em, | |
| 2em 2em 0 -1em, | |
| 0 3em 0 -1em, | |
| -2em 2em 0 0, | |
| -3em 0em 0 0.2em, | |
| -2em -2em 0 0; | |
| } | |
| 87.5% { | |
| box-shadow:0em -3em 0 0, | |
| 2em -2em 0 -1em, | |
| 3em 0 0 -1em, | |
| 2em 2em 0 -1em, | |
| 0 3em 0 -1em, | |
| -2em 2em 0 0, | |
| -3em 0em 0 0, | |
| -2em -2em 0 0.2em; | |
| } | |
| } | |
| @-webkit-keyframes load4 {@include load4-frames;} | |
| @keyframes load4 {@include load4-frames;} | |
| /* load5 */ | |
| @mixin load5-frames() { | |
| 0%, | |
| 100% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,1), | |
| 1.8em -1.8em 0 0em rgba($primary,0.2), | |
| 2.5em 0em 0 0em rgba($primary,0.2), | |
| 1.75em 1.75em 0 0em rgba($primary,0.2), | |
| 0em 2.5em 0 0em rgba($primary,0.2), | |
| -1.8em 1.8em 0 0em rgba($primary,0.2), | |
| -2.6em 0em 0 0em rgba($primary,0.5), | |
| -1.8em -1.8em 0 0em rgba($primary,0.7); | |
| } | |
| 12.5% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.7), | |
| 1.8em -1.8em 0 0em rgba($primary,1), | |
| 2.5em 0em 0 0em rgba($primary,0.2), | |
| 1.75em 1.75em 0 0em rgba($primary,0.2), | |
| 0em 2.5em 0 0em rgba($primary,0.2), | |
| -1.8em 1.8em 0 0em rgba($primary,0.2), | |
| -2.6em 0em 0 0em rgba($primary,0.2), | |
| -1.8em -1.8em 0 0em rgba($primary,0.5); | |
| } | |
| 25% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.5), | |
| 1.8em -1.8em 0 0em rgba($primary,0.7), | |
| 2.5em 0em 0 0em rgba($primary,1), | |
| 1.75em 1.75em 0 0em rgba($primary,0.2), | |
| 0em 2.5em 0 0em rgba($primary,0.2), | |
| -1.8em 1.8em 0 0em rgba($primary,0.2), | |
| -2.6em 0em 0 0em rgba($primary,0.2), | |
| -1.8em -1.8em 0 0em rgba($primary,0.2); | |
| } | |
| 37.5% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.2), | |
| 1.8em -1.8em 0 0em rgba($primary,0.5), | |
| 2.5em 0em 0 0em rgba($primary,0.7), | |
| 1.75em 1.75em 0 0em rgba($primary,1), | |
| 0em 2.5em 0 0em rgba($primary,0.2), | |
| -1.8em 1.8em 0 0em rgba($primary,0.2), | |
| -2.6em 0em 0 0em rgba($primary,0.2), | |
| -1.8em -1.8em 0 0em rgba($primary,0.2); | |
| } | |
| 50% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.2), | |
| 1.8em -1.8em 0 0em rgba($primary,0.2), | |
| 2.5em 0em 0 0em rgba($primary,0.5), | |
| 1.75em 1.75em 0 0em rgba($primary,0.7), | |
| 0em 2.5em 0 0em rgba($primary,1), | |
| -1.8em 1.8em 0 0em rgba($primary,0.2), | |
| -2.6em 0em 0 0em rgba($primary,0.2), | |
| -1.8em -1.8em 0 0em rgba($primary,0.2); | |
| } | |
| 62.5% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.2), | |
| 1.8em -1.8em 0 0em rgba($primary,0.2), | |
| 2.5em 0em 0 0em rgba($primary,0.2), | |
| 1.75em 1.75em 0 0em rgba($primary,0.5), | |
| 0em 2.5em 0 0em rgba($primary,0.7), | |
| -1.8em 1.8em 0 0em rgba($primary,1), | |
| -2.6em 0em 0 0em rgba($primary,0.2), | |
| -1.8em -1.8em 0 0em rgba($primary,0.2); | |
| } | |
| 75% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.2), | |
| 1.8em -1.8em 0 0em rgba($primary,0.2), | |
| 2.5em 0em 0 0em rgba($primary,0.2), | |
| 1.75em 1.75em 0 0em rgba($primary,0.2), | |
| 0em 2.5em 0 0em rgba($primary,0.5), | |
| -1.8em 1.8em 0 0em rgba($primary,0.7), | |
| -2.6em 0em 0 0em rgba($primary,1), | |
| -1.8em -1.8em 0 0em rgba($primary,0.2); | |
| } | |
| 87.5% { | |
| box-shadow:0em -2.6em 0em 0em rgba($primary,0.2), | |
| 1.8em -1.8em 0 0em rgba($primary,0.2), | |
| 2.5em 0em 0 0em rgba($primary,0.2), | |
| 1.75em 1.75em 0 0em rgba($primary,0.2), | |
| 0em 2.5em 0 0em rgba($primary,0.2), | |
| -1.8em 1.8em 0 0em rgba($primary,0.5), | |
| -2.6em 0em 0 0em rgba($primary,0.7), | |
| -1.8em -1.8em 0 0em rgba($primary,1); | |
| } | |
| } | |
| @-webkit-keyframes load5 {@include load5-frames;} | |
| @keyframes load5 {@include load5-frames;} | |
| /* load6 */ | |
| @mixin load6-frames() { | |
| 0% { | |
| -webkit-transform:rotate(0deg); | |
| transform:rotate(0deg); | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| 0 -0.83em 0 -0.42em, | |
| 0 -0.83em 0 -0.44em, | |
| 0 -0.83em 0 -0.46em, | |
| 0 -0.83em 0 -0.477em; | |
| } | |
| 5%, | |
| 95% { | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| 0 -0.83em 0 -0.42em, | |
| 0 -0.83em 0 -0.44em, | |
| 0 -0.83em 0 -0.46em, | |
| 0 -0.83em 0 -0.477em; | |
| } | |
| 10%, | |
| 59% { | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| -0.087em -0.825em 0 -0.42em, | |
| -0.173em -0.812em 0 -0.44em, | |
| -0.256em -0.789em 0 -0.46em, | |
| -0.297em -0.775em 0 -0.477em; | |
| } | |
| 20% { | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| -0.338em -0.758em 0 -0.42em, | |
| -0.555em -0.617em 0 -0.44em, | |
| -0.671em -0.488em 0 -0.46em, | |
| -0.749em -0.34em 0 -0.477em; | |
| } | |
| 38% { | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| -0.377em -0.74em 0 -0.42em, | |
| -0.645em -0.522em 0 -0.44em, | |
| -0.775em -0.297em 0 -0.46em, | |
| -0.82em -0.09em 0 -0.477em; | |
| } | |
| 100% { | |
| -webkit-transform:rotate(360deg); | |
| transform:rotate(360deg); | |
| box-shadow: | |
| 0 -0.83em 0 -0.4em, | |
| 0 -0.83em 0 -0.42em, | |
| 0 -0.83em 0 -0.44em, | |
| 0 -0.83em 0 -0.46em, | |
| 0 -0.83em 0 -0.477em; | |
| } | |
| } | |
| @-webkit-keyframes load6 {@include load6-frames;} | |
| @keyframes load6 {@include load6-frames;} | |
| /* load7 */ | |
| @mixin load7-frames() { | |
| 0%, | |
| 80%, | |
| 100% { | |
| box-shadow:0 2.5em 0 -1.3em; | |
| } | |
| 40% { | |
| box-shadow:0 2.5em 0 0; | |
| } | |
| } | |
| @-webkit-keyframes load7 {@include load7-frames;} | |
| @keyframes load7 {@include load7-frames;} | |
| /* load8 */ | |
| @mixin load8-frames() { | |
| 0% { | |
| -webkit-transform:rotate(0deg); | |
| transform:rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform:rotate(360deg); | |
| transform:rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes load8 {@include load8-frames;} | |
| @keyframes load8 {@include load8-frames;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment