Skip to content

Instantly share code, notes, and snippets.

@u1aryz

u1aryz/app-base.css

Created August 22, 2013 04:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save u1aryz/6303338 to your computer and use it in GitHub Desktop.
Save u1aryz/6303338 to your computer and use it in GitHub Desktop.
Download ZIP
Windows 8 Loading Animation ( Webkit )
Raw
app-base.css
body {
background: #111;
}
.loader {
position: relative;
padding-top: 100px;
width: 40px;
margin: auto;
}
.loader .circle {
position: absolute;
width: 38px;
height: 38px;
opacity: 0;
-webkit-transform: rotate(225deg);
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: orbit;
-webkit-animation-duration: 5.5s;
}
.loader .circle:after {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fff;
/* Pick a color */
}
.loader .circle:nth-child(2) {
-webkit-animation-delay: 240ms;
}
.loader .circle:nth-child(3) {
-webkit-animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
-webkit-animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
-webkit-animation-delay: 960ms;
}
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(225deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
7% {
-webkit-transform: rotate(345deg);
-webkit-animation-timing-function: linear;
}
30% {
-webkit-transform: rotate(455deg);
-webkit-animation-timing-function: ease-in-out;
}
39% {
-webkit-transform: rotate(690deg);
-webkit-animation-timing-function: linear;
}
70% {
-webkit-transform: rotate(815deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
75% {
-webkit-transform: rotate(945deg);
-webkit-animation-timing-function: ease-out;
}
76% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/app-base.css" rel="stylesheet">
</head>
<body>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment