Skip to content

Instantly share code, notes, and snippets.

@disc99

disc99/index.html

Created November 23, 2014 04:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save disc99/862310e3b281003cb38b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save disc99/862310e3b281003cb38b to your computer and use it in GitHub Desktop.
Download ZIP
Sony-loading
Raw
index.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="loading.css" />
</head>
<body>
<div id="global-wait">
<div class="waitHorizon">
<div class="waitContainer">
<div class="sq1"></div>
<div class="sq2"></div>
<div class="sq3"></div>
<div class="sq4"></div>
<div class="sq5"></div>
<div class="sq6"></div>
</div>
</div>
</div>
</body>
</html>
Raw
loading.css
@-webkit-keyframes wait-1-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
18% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
19% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
36% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
38% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
55% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
56% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
74% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
}
@-webkit-keyframes wait-2-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
5% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
23% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
24% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
42% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
43% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
61% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
62% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
79% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
}
@-webkit-keyframes wait-3-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
10% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
28% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
29% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
47% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
48% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
66% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
67% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
84% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
}
@-webkit-keyframes wait-4-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
16% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
34% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
52% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
53% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
71% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
72% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
90% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
}
@-webkit-keyframes wait-5-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
21% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
39% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
40% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
57% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
58% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
76% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
77% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
95% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
}
@-webkit-keyframes wait-6-of-6 {
0% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
26% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
44% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
45% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
63% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
64% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg);
opacity: 0;
}
81% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
82% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
opacity: 0;
}
}
#global-wait {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
z-index: 10101;
-webkit-perspective: 600;
-moz-perspective: 600;
-o-perspective: 600;
-ms-perspective: 600;
perspective: 600;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#global-wait .waitHorizon {
position: absolute;
left: 50%;
top: 50%;
}
#global-wait .waitContainer { position: relative }
#global-wait .waitContainer div {
position: absolute;
top: 0;
display: inline-block;
opacity: 0;
background-color: #4682B4;
}
#global-wait .sq1 {
-webkit-animation: wait-1-of-6 4s infinite;
-moz-animation: wait-1-of-6 4s infinite;
-o-animation: wait-1-of-6 4s infinite;
animation: wait-1-of-6 4s infinite;
}
#global-wait .sq2 {
-webkit-animation: wait-2-of-6 4s infinite;
-moz-animation: wait-2-of-6 4s infinite;
-o-animation: wait-2-of-6 4s infinite;
animation: wait-2-of-6 4s infinite;
}
#global-wait .sq3 {
-webkit-animation: wait-3-of-6 4s infinite;
-moz-animation: wait-3-of-6 4s infinite;
-o-animation: wait-3-of-6 4s infinite;
animation: wait-3-of-6 4s infinite;
}
#global-wait .sq4 {
-webkit-animation: wait-4-of-6 4s infinite;
-moz-animation: wait-4-of-6 4s infinite;
-o-animation: wait-4-of-6 4s infinite;
animation: wait-4-of-6 4s infinite;
}
#global-wait .sq5 {
-webkit-animation: wait-5-of-6 4s infinite;
-moz-animation: wait-5-of-6 4s infinite;
-o-animation: wait-5-of-6 4s infinite;
animation: wait-5-of-6 4s infinite;
}
#global-wait .sq6 {
-webkit-animation: wait-6-of-6 4s infinite;
-moz-animation: wait-6-of-6 4s infinite;
-o-animation: wait-6-of-6 4s infinite;
animation: wait-6-of-6 4s infinite;
}
#global-wait .waitContainer,
#global-wait .waitContainer,
#global-wait .waitContainer,
#global-wait .waitContainer,
#global-wait .waitContainer {
/*
left: -92.5px;
top: -15px;
*/ width: 185px;
height: 30px;
}
#global-wait .waitContainer div,
#global-wait .waitContainer div,
#global-wait .waitContainer div,
#global-wait .waitContainer div,
#global-wait .waitContainer div {
height: 30px;
width: 30px;
}
.sq1,
.sq1,
.sq1,
.sq1,
.sq1 { left: 0px }
.sq2,
.sq2,
.sq2,
.sq2,
.sq2 { left: 31px }
.sq3,
.sq3,
.sq3,
.sq3,
.sq3 { left: 62px }
.sq4,
.sq4,
.sq4,
.sq4,
.sq4 { left: 93px }
.sq5,
.sq5,
.sq5,
.sq5,
.sq5 { left: 124px }
.sq6,
.sq6,
.sq6,
.sq6,
.sq6 { left: 155px }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment