diff --git a/less/fallback.less b/less/fallback.less index aad10fb..3df36ec 100644 --- a/less/fallback.less +++ b/less/fallback.less @@ -2,22 +2,33 @@ It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers */ -.no-cssanimations .load-container .loader { - text-indent:0; - text-align:center; - color:#FFF; - font-size:17px; - background:none; - border:0 none; - width:auto; - height:auto; - margin:1em auto; - overflow:visible; - box-shadow:none; - -webkit-animation:none; - animation:none; +.no-cssanimations { + + .load-container { + + .loader { + text-indent:0; + text-align:center; + color:#FFF; + font-size:17px; + background:none; + border:0 none; + width:auto; + height:auto; + margin:1em auto; + overflow:visible; + box-shadow:none; + -webkit-animation:none; + animation:none; + + &:before, + &:after { + display:none; + } + + } + + } + } -.no-cssanimations .load-container .loader:before, -.no-cssanimations .load-container .loader:after { - display:none; -} \ No newline at end of file + diff --git a/less/load1.less b/less/load1.less index ad77f12..8de1778 100644 --- a/less/load1.less +++ b/less/load1.less @@ -1,48 +1,66 @@ @foreground: #FFF; -.load1 .loader,.load1 .loader:before,.load1 .loader:after { - background:@foreground; - -webkit-animation:load1 1s infinite ease-in-out; - animation:load1 1s infinite ease-in-out; - width:1em; - height:4em; -} -.load1 .loader:before,.load1 .loader:after { - position:absolute; - top:0; - content:''; -} -.load1 .loader:before { - left:-1.5em; - -webkit-animation-delay:-0.32s; - animation-delay:-0.32s; -} -.load1 .loader { - color:@foreground; - 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; -} -.load1 .loader:after { - left:1.5em; +.load1 { + + .loader, + .loader:before, + .loader:after { + background:@foreground; + -webkit-animation:load1 1s infinite ease-in-out; + animation:load1 1s infinite ease-in-out; + width:1em; + height:4em; + } + + .loader { + color:@foreground; + 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; + } + + } + } + @-webkit-keyframes load1 {.load1-frames;} @keyframes load1 {.load1-frames;} .load1-frames() { - 0%,80%,100% { + + 0%, + 80%, + 100% { box-shadow:0 0; height:4em; } + 40% { box-shadow:0 -2em; height:5em; } -} \ No newline at end of file + +} diff --git a/less/load2.less b/less/load2.less index 4b5dd30..4230414 100644 --- a/less/load2.less +++ b/less/load2.less @@ -1,61 +1,76 @@ @background: hsl(179,88%,41%); @foreground: #FFF; -.load2 .loader,.load2 .loader:before,.load2 .loader:after { - border-radius:50%; -} -.load2 .loader:before,.load2 .loader:after { - position:absolute; - content:''; -} -.load2 .loader: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.2em 5.1em; - transform-origin:5.2em 5.1em; - -webkit-animation:load2 2s infinite ease 1.5s; - animation:load2 2s infinite ease 1.5s; -} -.load2 .loader { - color:@foreground; - 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); -} -.load2 .loader:after { - width:5.2em; - height:10.2em; - background: @background; - 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:load2 2s infinite ease; - animation:load2 2s infinite ease; +.load2 { + + .loader, + .loader:before, + .loader:after { + border-radius:50%; + } + + .loader { + color:@foreground; + 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.2em 5.1em; + transform-origin:5.2em 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:5.1em; + -webkit-transform-origin:0px 5.1em; + transform-origin:0px 5.1em; + -webkit-animation:load2 2s infinite ease; + animation:load2 2s infinite ease; + } + + } + } @-webkit-keyframes load2 {.load2-frames;} @keyframes load2 {.load2-frames;} .load2-frames() { + 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } + 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } -} \ No newline at end of file + +} diff --git a/less/load3.less b/less/load3.less index 8097991..086be4d 100644 --- a/less/load3.less +++ b/less/load3.less @@ -1,57 +1,67 @@ @background: hsl(179,88%,41%); @foreground: #FFF; -.load3 .loader { - font-size:10px; - margin:50px auto; - text-indent:-9999em; - width:11em; - height:11em; - border-radius:50%; - background: @foreground; - background: -moz-linear-gradient(left, fade(@foreground,100%) 10%, fade(@foreground,0%) 42%); - background: -webkit-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); - background: -o-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); - background: -ms-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); - background: linear-gradient(to right, fade(@foreground,100%) 10%,fade(@foreground,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); -} -.load3 .loader:before { - width:50%; - height:50%; - background: @foreground; - border-radius: 100% 0 0 0; - position:absolute; - top:0; - left:0; - content:''; -} +.load3 { + + .loader { + font-size:10px; + margin:50px auto; + text-indent:-9999em; + width:11em; + height:11em; + border-radius:50%; + background: @foreground; + background: -moz-linear-gradient(left, fade(@foreground,100%) 10%, fade(@foreground,0%) 42%); + background: -webkit-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); + background: -o-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); + background: -ms-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); + background: linear-gradient(to right, fade(@foreground,100%) 10%,fade(@foreground,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: @foreground; + 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 .loader:after { - background:@background; - width:75%; - height:75%; - border-radius:50%; - content:''; - margin:auto; - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; } + @-webkit-keyframes load3 {.load3-frames;} @keyframes load3 {.load3-frames;} .load3-frames() { + 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } + 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } -} \ No newline at end of file + +} diff --git a/less/load4.less b/less/load4.less index c23df7e..9e13abe 100644 --- a/less/load4.less +++ b/less/load4.less @@ -1,25 +1,31 @@ @foreground: #FFF; -.load4 .loader { - color:@foreground; - 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 { + + .loader { + color:@foreground; + 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); + } + } @-webkit-keyframes load4 {.load4-frames;} @keyframes load4 {.load4-frames;} .load4-frames() { - 0%,100% { + + 0%, + 100% { box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, @@ -29,6 +35,7 @@ -3em 0 0 -1em, -2em -2em 0 0; } + 12.5% { box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, @@ -39,6 +46,7 @@ -3em 0 0 -1em, -2em -2em 0 -1em; } + 25% { box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, @@ -49,6 +57,7 @@ -3em 0 0 -1em, -2em -2em 0 -1em; } + 37.5% { box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, @@ -59,6 +68,7 @@ -3em 0em 0 -1em, -2em -2em 0 -1em; } + 50% { box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, @@ -69,6 +79,7 @@ -3em 0em 0 -1em, -2em -2em 0 -1em; } + 62.5% { box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, @@ -79,6 +90,7 @@ -3em 0 0 0, -2em -2em 0 -1em; } + 75% { box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, @@ -89,6 +101,7 @@ -3em 0em 0 0.2em, -2em -2em 0 0; } + 87.5% { box-shadow:0em -3em 0 0, 2em -2em 0 -1em, @@ -99,4 +112,5 @@ -3em 0em 0 0, -2em -2em 0 0.2em; } -} \ No newline at end of file + +} diff --git a/less/load5.less b/less/load5.less index 88f515a..5cb950d 100644 --- a/less/load5.less +++ b/less/load5.less @@ -1,23 +1,30 @@ @foreground: #fff; -.load5 .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 { + + .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); + } + } @-webkit-keyframes load5 {.load5-frames;} @keyframes load5 {.load5-frames;} + .load5-frames() { - 0%,100% { + + 0%, + 100% { box-shadow:0em -2.6em 0em 0em fade(@foreground,100%), 1.8em -1.8em 0 0em fade(@foreground,20%), 2.5em 0em 0 0em fade(@foreground,20%), @@ -27,6 +34,7 @@ -2.6em 0em 0 0em fade(@foreground,50%), -1.8em -1.8em 0 0em fade(@foreground,70%); } + 12.5% { box-shadow:0em -2.6em 0em 0em fade(@foreground,70%), 1.8em -1.8em 0 0em fade(@foreground,100%), @@ -37,6 +45,7 @@ -2.6em 0em 0 0em fade(@foreground,20%), -1.8em -1.8em 0 0em fade(@foreground,50%); } + 25% { box-shadow:0em -2.6em 0em 0em fade(@foreground,50%), 1.8em -1.8em 0 0em fade(@foreground,70%), @@ -47,6 +56,7 @@ -2.6em 0em 0 0em fade(@foreground,20%), -1.8em -1.8em 0 0em fade(@foreground,20%); } + 37.5% { box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 1.8em -1.8em 0 0em fade(@foreground,50%), @@ -57,8 +67,8 @@ -2.6em 0em 0 0em fade(@foreground,20%), -1.8em -1.8em 0 0em fade(@foreground,20%); } - 50% { + 50% { box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 1.8em -1.8em 0 0em fade(@foreground,20%), 2.5em 0em 0 0em fade(@foreground,50%), @@ -68,6 +78,7 @@ -2.6em 0em 0 0em fade(@foreground,20%), -1.8em -1.8em 0 0em fade(@foreground,20%); } + 62.5% { box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 1.8em -1.8em 0 0em fade(@foreground,20%), @@ -78,6 +89,7 @@ -2.6em 0em 0 0em fade(@foreground,20%), -1.8em -1.8em 0 0em fade(@foreground,20%); } + 75% { box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 1.8em -1.8em 0 0em fade(@foreground,20%), @@ -88,6 +100,7 @@ -2.6em 0em 0 0em fade(@foreground,100%), -1.8em -1.8em 0 0em fade(@foreground,20%); } + 87.5% { box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 1.8em -1.8em 0 0em fade(@foreground,20%), @@ -98,4 +111,5 @@ -2.6em 0em 0 0em fade(@foreground,70%), -1.8em -1.8em 0 0em fade(@foreground,100%); } + } diff --git a/less/load6.less b/less/load6.less index 8fbbea0..b1dbc77 100644 --- a/less/load6.less +++ b/less/load6.less @@ -1,25 +1,30 @@ @foreground: #fff; -.load6 .loader { - color:@foreground; - 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 { + + .loader { + color:@foreground; + 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; + } + } @-webkit-keyframes load6 {.load6-frames;} @keyframes load6 {.load6-frames;} .load6-frames() { + 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); @@ -30,7 +35,9 @@ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } - 5%, 95% { + + 5%, + 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, @@ -38,6 +45,7 @@ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } + 10%, 59% { box-shadow: @@ -47,6 +55,7 @@ -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; } + 20% { box-shadow: 0 -0.83em 0 -0.4em, @@ -55,6 +64,7 @@ -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; } + 38% { box-shadow: 0 -0.83em 0 -0.4em, @@ -63,6 +73,7 @@ -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } + 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); @@ -73,4 +84,5 @@ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } + } diff --git a/less/load7.less b/less/load7.less index 479310b..5d099fb 100644 --- a/less/load7.less +++ b/less/load7.less @@ -1,48 +1,65 @@ @foreground: #fff; -.load7 .loader:before,.load7 .loader:after,.load7 .loader { - 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; -} -.load7 .loader { - color:@foreground; - 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; -} -.load7 .loader:before { - left:-3.5em; - -webkit-animation-delay:-0.32s; - animation-delay:-0.32s; -} -.load7 .loader:after { - left:3.5em; -} -.load7 .loader:before,.load7 .loader:after { - content:''; - position:absolute; - top:0; +.load7 { + + .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:@foreground; + 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; + } + + } + } @-webkit-keyframes load7 {.load7-frames;} @keyframes load7 {.load7-frames;} .load7-frames() { - 0%,80%,100% { + + 0%, + 80%, + 100% { box-shadow:0 2.5em 0 -1.3em; } + 40% { box-shadow:0 2.5em 0 0; } -} \ No newline at end of file + +} diff --git a/less/load8.less b/less/load8.less index b202751..a6ec717 100644 --- a/less/load8.less +++ b/less/load8.less @@ -1,35 +1,45 @@ @foreground: #fff; -.load8 .loader { - margin:60px auto; - font-size:10px; - position:relative; - text-indent:-9999em; - border-top:1.1em solid fade(@foreground,20%); - border-right:1.1em solid fade(@foreground,20%); - border-bottom:1.1em solid fade(@foreground,20%); - border-left:1.1em solid fade(@foreground,100%); - -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 .loader,.load8 .loader:after { - border-radius:50%; - width:10em; - height:10em; +.load8 { + + .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 fade(@foreground,20%); + border-right:1.1em solid fade(@foreground,20%); + border-bottom:1.1em solid fade(@foreground,20%); + border-left:1.1em solid fade(@foreground,100%); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation:load8 1.1s infinite linear; + animation:load8 1.1s infinite linear; + } + } + @-webkit-keyframes load8 {.load8-frames;} @keyframes load8 {.load8-frames;} .load8-frames() { + 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } + 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } -} \ No newline at end of file + +}