Skip to content

Instantly share code, notes, and snippets.

@mousemke

mousemke/loader.html

Created May 4, 2016 13: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 mousemke/4d84194e076ff24af3efb1f07110c1bf to your computer and use it in GitHub Desktop.
Save mousemke/4d84194e076ff24af3efb1f07110c1bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loader.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.loader
{
left: calc(100% / 2);
position: absolute;
zoom: 1;
width: 16px;
height: 16px;
background: linear-gradient( 0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px ),
linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px),
linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px),
linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px),
linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px),
linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px),
linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px),
linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px),
linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px),
linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px),
linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px),
linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background-repeat: no-repeat;
background-size: 4px 9px,
4px 9px,
4px 9px,
4px 9px,
4px 9px,
4px 9px,
4px 11px,
4px 11px,
4px 16px,
4px 16px,
4px 16px,
4px 16px;
background-position-x: -4px;
background-position-y: 3px, 3px, 3px, 3px, 3px, 3px, 2px, 2px, 0, 0, 0, 0;
animation: wait 0.8s steps( 1, start ) infinite;
}
@keyframes wait {
12.5% {
background-position-x: -4px,-4px, -4px, -4px, -4px,-4px,
-4px,-4px, -4px, -4px, 0, 0;
}
25% {
background-position-x: -4px, -4px, -4px, -4px, -4px,-4px,
-4px, -4px, 0, 0, 6px, 6px;
}
37.5% {
background-position-x: -4px, -4px, -4px, -4px, -4px, -4px,
0, 0, 6px, 6px, 12px, 12px;
}
50%{
background-position-x: -4px, -4px, -4px, -4px, 0, 0,
6px, 6px, 12px, 12px, -4px, -4px;
}
62.5% {
background-position-x: -4px, -4px, 0, 0, 6px, 6px,
12px, 12px, -4px, -4px, -4px, -4px;
}
75% {
background-position-x: 0, 0, 6px, 6px, 12px, 12px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
87.5%{
background-position-x: 6px, 6px, 12px, 12px, -4px, -4px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
100% {
background-position-x: 12px, 12px, -4px, -4px, -4px, -4px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment