Skip to content

Instantly share code, notes, and snippets.

@ikonikre

ikonikre/loading-index.html

Last active September 30, 2016 06:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ikonikre/63e43e5bec641cb75d08711b6a885556 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ikonikre/63e43e5bec641cb75d08711b6a885556 to your computer and use it in GitHub Desktop.
Download ZIP
Loading Pixels
Raw
loading-index.html
<div id="container">
<section class="loadingPixel">
<section class="border one"></section>
<section class="border two"></section>
<section class="border three"></section>
<section class="border four"></section>
<section id="center"></section>
</section>
</div>
Raw
loading-pixels.markdown
Raw
script.js
$(function(){
$(window).load(function(){
setTimeout(function(){
$('.loadingPixel').fadeIn(1500);
}, 500);
setTimeout(function(){
$('#center > h1').fadeIn(1500);
}, 1500);
});
$('#center').hover(function(){
$('.loadingPixel').children().toggleClass('slowmo');
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body{
width: 100%;
height: 100%;
background-color: #080808;
background-color: rgba(8,8,8,1.0);
color: #026261;
color: rgba(2,98,97,1.0);
}
#container{
height: 100%;
width: 100%;
margin: 0 auto;
}
.loadingPixel > #center {
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 200px;
height: 100px;
margin-left: -110px;
margin-top: -110px;
padding: 70px 0px 30px;
background-color: #080808;
background-color: rgba(8,8,8,1.0);
border: 10px solid #080808;
border: 10px solid rgba(8,8,8,1.0);
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
-webkit-text-shadow: 2px 2px 0px rgba(0,0,0,1);
-moz-text-shadow: 2px 2px 0px rgba(0,0,0,1);
text-shadow: 2px 2px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 30px rgba(23,246,251, 0.5);
-moz-box-shadow: 0px 0px 30px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.5);
-webkit-animation: pulseShadow 5s infinite linear;
-moz-animation: pulseShadow 5s infinite linear;
-ms-animation: pulseShadow 5s infinite linear;
-o-animation: pulseShadow 5s infinite linear;
animation: pulseShadow 5s infinite linear;
}
#center:after{
content:'';
border: 3px dotted #162A2B;
border: 3px dotted rgba(22,42,43,1.0);
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 200px;
height: 200px;
display: block;
position: absolute;
top:-3px;
left:-3px;
background-color: transparent;
-webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,1.0);
-moz-box-shadow: inset 0px 0px 30px rgba(0,0,0,1.0);
box-shadow: inset 0px 0px 30px rgba(0,0,0,1.0);
}
#container > .loadingPixel{
height: 100%;
display: block;
}
#container > .loadingPixel > section.border{
position: absolute;
left: 50%;
top: 50%;
display: block;
background: transparent;
border: 10px solid #17F6FB;
border: 10px solid rgba(23,246,251, 1.0);
border-left-color: transparent;
border-right-color: transparent;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#container > .loadingPixel > section.border.one{
margin-left: -130px;
margin-top: -130px;
z-index: 19;
width: 240px;
height: 240px;
border-width: 10px;
-webkit-animation: spinBG 5s infinite linear;
-moz-animation: spinBG 5s infinite linear;
-ms-animation: spinBG 5s infinite linear;
-o-animation: spinBG 5s infinite linear;
animation: spinBG 5s infinite linear;
}
#container > .loadingPixel > section.border.two{
margin-left: -137px;
margin-top: -137px;
z-index: 18;
width: 270px;
height: 270px;
border-width: 2px;
border-style: dotted;
-webkit-box-shadow: 0px 0px 20px rgba(23,246,251, .5);
-moz-box-shadow: 0px 0px 20px rgba(23,246,251, .5);
box-shadow: 0px 0px 20px rgba(23,246,251, .5);
-webkit-animation: spinBG2 2s infinite linear;
-moz-animation: spinBG2 2s infinite linear;
-ms-animation: spinBG2 2s infinite linear;
-o-animation: spinBG2 2s infinite linear;
animation: spinBG2 2s infinite linear;
}
#container > .loadingPixel > section.border.three{
margin-left: -150px;
margin-top: -150px;
z-index: 18;
width: 296px;
height: 296px;
border-width: 2px;
-webkit-box-shadow: inset 0px 0px 25px rgba(23,246,251, .25);
-moz-box-shadow: inset 0px 0px 25px rgba(23,246,251, .25);
box-shadow: inset 0px 0px 25px rgba(23,246,251, .25);
-webkit-animation: spinBG 12s infinite linear;
-moz-animation: spinBG 12s infinite linear;
-ms-animation: spinBG 12s infinite linear;
-o-animation: spinBG 12s infinite linear;
animation: spinBG 12s infinite linear;
}
#container > .loadingPixel > section.border.four{
margin-left: -170px;
margin-top: -170px;
z-index: 18;
width: 330px;
height: 330px;
border-width: 5px;
border-style: solid;
-webkit-box-shadow: inset 0px 0px 25px rgba(23,246,251,1.0);
-moz-box-shadow: inset 0px 0px 25px rgba(23,246,251,1.0);
box-shadow: inset 0px 0px 25px rgba(23,246,251,1.0);
-webkit-animation: spinBG3 8s infinite linear;
-moz-animation: spinBG3 8s infinite linear;
-ms-animation: spinBG3 8s infinite linear;
-o-animation: spinBG3 8s infinite linear;
animation: spinBG3 8s infinite linear;
}
#container > .loadingPixel > section.border.one.slowmo{
-webkit-animation-duration: 10s !important;
-moz-animation-duration: 10s !important;
-ms-animation-duration: 10s !important;
-o-animation-duration: 10s !important;
animation-duration: 10s !important;
}
#container > .loadingPixel > section.border.two.slowmo{
-webkit-animation-duration: 4s !important;
-moz-animation-duration: 4s !important;
-ms-animation-duration: 4s !important;
-o-animation-duration: 4s !important;
animation-duration: 4s !important;
}
#container > .loadingPixel > section.border.three.slowmo{
-webkit-animation-duration: 24s !important;
-moz-animation-duration: 24s !important;
-ms-animation-duration: 24s !important;
-o-animation-duration: 24s !important;
animation-duration: 24s !important;
}
#container > .loadingPixel > section.border.four.slowmo{
-webkit-animation-duration: 16s !important;
-moz-animation-duration: 16s !important;
-ms-animation-duration: 16s !important;
-o-animation-duration: 16s !important;
animation-duration: 16s !important;
}
@-webkit-keyframes pulseGlow{
0%{
-webkit-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
50%{
-webkit-text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
}
100%{
-webkit-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
}
@-webkit-keyframes pulseShadow{
0%{
-webkit-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
50%{
-webkit-box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
}
100%{
-webkit-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
}
@-webkit-keyframes pulseTextShadow{
0%{
-webkit-text-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
text-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
50%{
-webkit-text-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
}
100%{
-webkit-text-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
text-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
}
@-webkit-keyframes spinBG{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinBG2{
0%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
}
@-webkit-keyframes spinBG3{
0%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
opacity: 0;
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100%{
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/* Mozilla Animations */
@-moz-keyframes pulseGlow{
0%{
-moz-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
50%{
-moz-text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
}
100%{
-moz-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
}
@-moz-keyframes pulseShadow{
0%{
-moz-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
50%{
-moz-box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
}
100%{
-moz-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
}
@-moz-keyframes spinBG{
0%{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinBG2{
0%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-moz-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
50%{
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-moz-box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
}
100%{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
}
@-moz-keyframes spinBG3{
0%{
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-moz-box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
opacity: 0;
}
50%{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100%{
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/* Opera Animations */
@-o-keyframes pulseGlow{
0%{
-o-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
50%{
-o-text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
}
100%{
-o-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
}
@-o-keyframes pulseShadow{
0%{
-o-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
50%{
-o-box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
}
100%{
-o-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
}
@-o-keyframes spinBG{
0%{
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinBG2{
0%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
-o-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
50%{
-o-transform: rotate(180deg);
transform: rotate(180deg);
-o-box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
}
100%{
-o-transform: rotate(0deg);
transform: rotate(0deg);
-o-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
}
@-o-keyframes spinBG3{
0%{
-o-transform: rotate(180deg);
transform: rotate(180deg);
-o-box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
opacity: 0;
}
50%{
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100%{
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/* IE Animations */
@-ms-keyframes pulseGlow{
0%{
-ms-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
50%{
-ms-text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);
}
100%{
-ms-text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);
}
}
@-ms-keyframes pulseShadow{
0%{
-ms-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
50%{
-ms-box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);
}
100%{
-ms-box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);
}
}
@-ms-keyframes spinBG{
0%{
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes spinBG2{
0%{
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-ms-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
50%{
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
}
100%{
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-ms-box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
}
@-ms-keyframes spinBG3{
0%{
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
opacity: 0;
}
50%{
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100%{
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/* Non-Vendor Specific Animations */
@keyframes pulseGlow{
0%{text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);}
50%{text-shadow: 0px 0px 40px rgba(23,246,251, 0.5);}
100%{text-shadow: 0px 0px 20px rgba(23,246,251, 0.75);}
}
@keyframes pulseShadow{
0%{box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);}
50%{box-shadow: 0px 0px 30px rgba(23,246,251, 0.75);}
100%{box-shadow: 0px 0px 30px rgba(23,246,251, 0.25);}
}
@keyframes spinBG{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@keyframes spinBG2{
0%{
transform: rotate(360deg);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
50%{
transform: rotate(180deg);
box-shadow: 0px 0px 20px rgba(23,246,251, 0.5);
}
100%{
transform: rotate(0deg);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.5);
}
}
@keyframes spinBG3{
0%{
transform: rotate(180deg);
box-shadow: 0px 0px 1px rgba(23,246,251, 0.1);
opacity: 0;
}
50%{
transform: rotate(0deg);
opacity: 1;
}
100%{
transform: rotate(-180deg);
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment