Last active
May 15, 2016 17:48
-
-
Save jackw/35ca3f9cacbd403bf3fbec2363befe89 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com - view it in all it's glory at http://www.sassmeister.com/gist/35ca3f9cacbd403bf3fbec2363befe89
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
> 1% | |
last 2 versions |
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
<div class="ground"></div> | |
<div class="sky"> | |
<div class="cloud variant-1"></div> | |
<div class="cloud variant-2"></div> | |
<div class="cloud variant-3"></div> | |
<div class="cloud variant-4"></div> | |
<div class="cloud variant-5"></div> | |
</div> | |
<div class="rainbow-preloader"> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="shadow"></div> | |
<div class="shadow"></div> | |
</div> |
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
// ---- | |
// libsass (v3.3.6) | |
// ---- | |
$rainbow : ( | |
red : rgba(241,90,90,1), | |
yellow : rgba(240,196,25,1), | |
green : rgba(78,186,111,1), | |
blue : rgba(45,149,191,1), | |
purple : rgba(149,91,165,1), | |
); | |
$i : 1; | |
$border-width : 12px; | |
$dimension : 60px; | |
$offset : $dimension - $border-width; | |
$clip : $dimension + ($border-width *2); | |
$z : length($rainbow); | |
@each $color, $value in $rainbow { | |
.rainbow-preloader .rainbow-stripe:nth-child(#{$i}) { | |
animation: rainbow-in-out length($rainbow)+s #{$i / (length($rainbow)*2)}s infinite; | |
border-color: $value; | |
clip: rect(0, $clip, ($clip / 2), 0); | |
height: $dimension; | |
left: $offset; | |
transform : rotate(180deg); | |
top: $offset; | |
width: $dimension; | |
z-index: $z; | |
&:before { | |
border:($border-width/4) solid darken($value, 10%); | |
content: ''; | |
display: block; | |
height: $dimension - $border-width; | |
width: $dimension - ($border-width /2); | |
} | |
} | |
$i: $i + 1; | |
$dimension: $dimension + ($border-width * 2); | |
$offset: $offset - $border-width; | |
$clip: $dimension + ($border-width *2); | |
$z: $z - 1; | |
} | |
.rainbow-preloader { | |
height: $dimension / 2; | |
left: 50%; | |
margin-left: 0 - $dimension / 2; | |
margin-top: 0 - $dimension / 2; | |
overflow: hidden; | |
position: absolute; | |
top: 50%; | |
width: $dimension; | |
&:before, | |
&:after { | |
$color: #6b9903; | |
background: linear-gradient(45deg, transparent 33.333%, $color 33.333%, $color 66.667%, transparent 66.667%), | |
linear-gradient(-45deg, transparent 33.333%, $color 33.333%, $color 66.667%, transparent 66.667%); | |
background-size: 6px 34px; | |
bottom:0; | |
content: ''; | |
display: block; | |
height: 12px; | |
left: 0; | |
position: absolute; | |
width: length($rainbow) * $border-width + ($border-width/2); | |
z-index: length($rainbow) *2; | |
} | |
&:after { | |
left:auto; | |
right:0; | |
} | |
.rainbow-stripe { | |
border-width: $border-width; | |
border-style: solid; | |
border-radius: 100%; | |
position: absolute; | |
&:before { | |
border-radius: 100%; | |
} | |
} | |
.shadow { | |
animation: shadow-in-out 5s infinite; | |
background: rgba(0, 0, 0, 0.2); | |
bottom: -1px; | |
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); | |
height: 2px; | |
left: 0; | |
opacity: 0; | |
position: absolute; | |
width: 0; | |
+ .shadow { | |
left: 118px; | |
animation-delay: 0.5s; | |
} | |
} | |
} | |
body { | |
overflow-x: hidden; | |
} | |
.sky { | |
background: linear-gradient(rgb(133,165,204) 0, rgb(208,228,242) 100%); | |
box-shadow: 0 0 20px rgb(208,228,242); | |
height: 47%; | |
left: 0; | |
overflow: hidden; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
.cloud { | |
background: rgb(235,245,252); | |
border-radius: 200px; | |
box-shadow: 0 1px 1px rgba(0,0,0,0.1); | |
height: 39px; | |
margin-right: -102px; | |
position: absolute; | |
right: 0%; | |
width: 102px; | |
$j: 0; | |
@for $i from 1 to 6 { | |
&.variant-#{$i} { | |
animation: clouds-in-out 15 +$i+s ($j * 2)+s infinite linear; | |
top: random(80) * 1%; | |
transform: scale(0.2 * $i); | |
} | |
$j: $j + 1; | |
} | |
&:before, | |
&:after { | |
background: rgb(235,245,252); | |
border-radius: 100px; | |
content: ''; | |
height: 45px; | |
left: 10px; | |
position: absolute; | |
transform: rotate(30deg); | |
top: -10px; | |
width: 60px; | |
} | |
&:after { | |
height: 60px; | |
left: auto; | |
right: 12px; | |
top: -24px; | |
width: 60px; | |
} | |
} | |
} | |
.ground { | |
background: linear-gradient(rgb(110,158,3) 0, rgb(79,115,2) 100%); | |
bottom: 0; | |
height: 57%; | |
left: 0; | |
position: absolute; | |
right: 0; | |
} | |
@-webkit-keyframes rainbow-in-out { | |
0% {transform: rotate(180deg);} | |
33% {transform: rotate(360deg);} | |
66% {transform: rotate(360deg);} | |
100% {transform: rotate(540deg);} | |
} | |
@-webkit-keyframes shadow-in-out { | |
0% { opacity: 0; width: 0;} | |
33% { opacity: 1; width: length($rainbow) * $border-width;} | |
66% { opacity: 1; width: length($rainbow) * $border-width;} | |
100% { opacity: 0; width: 0;} | |
} | |
@-webkit-keyframes clouds-in-out { | |
0% {right: 0%;} | |
100% {right: 105%;} | |
} | |
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
.rainbow-preloader .rainbow-stripe:nth-child(1) { | |
-webkit-animation: rainbow-in-out 5s 0.1s infinite; | |
animation: rainbow-in-out 5s 0.1s infinite; | |
border-color: #f15a5a; | |
clip: rect(0, 84px, 42px, 0); | |
height: 60px; | |
left: 48px; | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
top: 48px; | |
width: 60px; | |
z-index: 5; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(1):before { | |
border: 3px solid #ed2b2b; | |
content: ''; | |
display: block; | |
height: 48px; | |
width: 54px; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(2) { | |
-webkit-animation: rainbow-in-out 5s 0.2s infinite; | |
animation: rainbow-in-out 5s 0.2s infinite; | |
border-color: #f0c419; | |
clip: rect(0, 108px, 54px, 0); | |
height: 84px; | |
left: 36px; | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
top: 36px; | |
width: 84px; | |
z-index: 4; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(2):before { | |
border: 3px solid #c9a20d; | |
content: ''; | |
display: block; | |
height: 72px; | |
width: 78px; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(3) { | |
-webkit-animation: rainbow-in-out 5s 0.3s infinite; | |
animation: rainbow-in-out 5s 0.3s infinite; | |
border-color: #4eba6f; | |
clip: rect(0, 132px, 66px, 0); | |
height: 108px; | |
left: 24px; | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
top: 24px; | |
width: 108px; | |
z-index: 3; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(3):before { | |
border: 3px solid #3c9958; | |
content: ''; | |
display: block; | |
height: 96px; | |
width: 102px; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(4) { | |
-webkit-animation: rainbow-in-out 5s 0.4s infinite; | |
animation: rainbow-in-out 5s 0.4s infinite; | |
border-color: #2d95bf; | |
clip: rect(0, 156px, 78px, 0); | |
height: 132px; | |
left: 12px; | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
top: 12px; | |
width: 132px; | |
z-index: 2; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(4):before { | |
border: 3px solid #237596; | |
content: ''; | |
display: block; | |
height: 120px; | |
width: 126px; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(5) { | |
-webkit-animation: rainbow-in-out 5s 0.5s infinite; | |
animation: rainbow-in-out 5s 0.5s infinite; | |
border-color: #955ba5; | |
clip: rect(0, 180px, 90px, 0); | |
height: 156px; | |
left: 0px; | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
top: 0px; | |
width: 156px; | |
z-index: 1; | |
} | |
.rainbow-preloader .rainbow-stripe:nth-child(5):before { | |
border: 3px solid #774984; | |
content: ''; | |
display: block; | |
height: 144px; | |
width: 150px; | |
} | |
.rainbow-preloader { | |
height: 90px; | |
left: 50%; | |
margin-left: -90px; | |
margin-top: -90px; | |
overflow: hidden; | |
position: absolute; | |
top: 50%; | |
width: 180px; | |
} | |
.rainbow-preloader:before, .rainbow-preloader:after { | |
background: -webkit-linear-gradient(45deg, transparent 33.333%, #6b9903 33.333%, #6b9903 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #6b9903 33.333%, #6b9903 66.667%, transparent 66.667%); | |
background: linear-gradient(45deg, transparent 33.333%, #6b9903 33.333%, #6b9903 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #6b9903 33.333%, #6b9903 66.667%, transparent 66.667%); | |
background-size: 6px 34px; | |
bottom: 0; | |
content: ''; | |
display: block; | |
height: 12px; | |
left: 0; | |
position: absolute; | |
width: 66px; | |
z-index: 10; | |
} | |
.rainbow-preloader:after { | |
left: auto; | |
right: 0; | |
} | |
.rainbow-preloader .rainbow-stripe { | |
border-width: 12px; | |
border-style: solid; | |
border-radius: 100%; | |
position: absolute; | |
} | |
.rainbow-preloader .rainbow-stripe:before { | |
border-radius: 100%; | |
} | |
.rainbow-preloader .shadow { | |
-webkit-animation: shadow-in-out 5s infinite; | |
animation: shadow-in-out 5s infinite; | |
background: rgba(0, 0, 0, 0.2); | |
bottom: -1px; | |
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); | |
height: 2px; | |
left: 0; | |
opacity: 0; | |
position: absolute; | |
width: 0; | |
} | |
.rainbow-preloader .shadow + .shadow { | |
left: 118px; | |
-webkit-animation-delay: 0.5s; | |
animation-delay: 0.5s; | |
} | |
body { | |
overflow-x: hidden; | |
} | |
.sky { | |
background: -webkit-linear-gradient(#85a5cc 0, #d0e4f2 100%); | |
background: linear-gradient(#85a5cc 0, #d0e4f2 100%); | |
box-shadow: 0 0 20px #d0e4f2; | |
height: 47%; | |
left: 0; | |
overflow: hidden; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
.sky .cloud { | |
background: #ebf5fc; | |
border-radius: 200px; | |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
height: 39px; | |
margin-right: -102px; | |
position: absolute; | |
right: 0%; | |
width: 102px; | |
} | |
.sky .cloud.variant-1 { | |
-webkit-animation: clouds-in-out 16s 0s infinite linear; | |
animation: clouds-in-out 16s 0s infinite linear; | |
top: 61%; | |
-webkit-transform: scale(0.2); | |
-ms-transform: scale(0.2); | |
transform: scale(0.2); | |
} | |
.sky .cloud.variant-2 { | |
-webkit-animation: clouds-in-out 17s 2s infinite linear; | |
animation: clouds-in-out 17s 2s infinite linear; | |
top: 16%; | |
-webkit-transform: scale(0.4); | |
-ms-transform: scale(0.4); | |
transform: scale(0.4); | |
} | |
.sky .cloud.variant-3 { | |
-webkit-animation: clouds-in-out 18s 4s infinite linear; | |
animation: clouds-in-out 18s 4s infinite linear; | |
top: 76%; | |
-webkit-transform: scale(0.6); | |
-ms-transform: scale(0.6); | |
transform: scale(0.6); | |
} | |
.sky .cloud.variant-4 { | |
-webkit-animation: clouds-in-out 19s 6s infinite linear; | |
animation: clouds-in-out 19s 6s infinite linear; | |
top: 76%; | |
-webkit-transform: scale(0.8); | |
-ms-transform: scale(0.8); | |
transform: scale(0.8); | |
} | |
.sky .cloud.variant-5 { | |
-webkit-animation: clouds-in-out 20s 8s infinite linear; | |
animation: clouds-in-out 20s 8s infinite linear; | |
top: 4%; | |
-webkit-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
} | |
.sky .cloud:before, .sky .cloud:after { | |
background: #ebf5fc; | |
border-radius: 100px; | |
content: ''; | |
height: 45px; | |
left: 10px; | |
position: absolute; | |
-webkit-transform: rotate(30deg); | |
-ms-transform: rotate(30deg); | |
transform: rotate(30deg); | |
top: -10px; | |
width: 60px; | |
} | |
.sky .cloud:after { | |
height: 60px; | |
left: auto; | |
right: 12px; | |
top: -24px; | |
width: 60px; | |
} | |
.ground { | |
background: -webkit-linear-gradient(#6e9e03 0, #4f7302 100%); | |
background: linear-gradient(#6e9e03 0, #4f7302 100%); | |
bottom: 0; | |
height: 57%; | |
left: 0; | |
position: absolute; | |
right: 0; | |
} | |
@-webkit-keyframes rainbow-in-out { | |
0% { | |
-webkit-transform: rotate(180deg); | |
transform: rotate(180deg); | |
} | |
33% { | |
-webkit-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
66% { | |
-webkit-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
100% { | |
-webkit-transform: rotate(540deg); | |
transform: rotate(540deg); | |
} | |
} | |
@-webkit-keyframes shadow-in-out { | |
0% { | |
opacity: 0; | |
width: 0; | |
} | |
33% { | |
opacity: 1; | |
width: 60px; | |
} | |
66% { | |
opacity: 1; | |
width: 60px; | |
} | |
100% { | |
opacity: 0; | |
width: 0; | |
} | |
} | |
@-webkit-keyframes clouds-in-out { | |
0% { | |
right: 0%; | |
} | |
100% { | |
right: 105%; | |
} | |
} |
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
<div class="ground"></div> | |
<div class="sky"> | |
<div class="cloud variant-1"></div> | |
<div class="cloud variant-2"></div> | |
<div class="cloud variant-3"></div> | |
<div class="cloud variant-4"></div> | |
<div class="cloud variant-5"></div> | |
</div> | |
<div class="rainbow-preloader"> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="rainbow-stripe"></div> | |
<div class="shadow"></div> | |
<div class="shadow"></div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment