Skip to content

Instantly share code, notes, and snippets.

@maolion

maolion/gist:a617840b9590a88d4ad8

Created November 23, 2014 07:36
Show Gist options
  • Save maolion/a617840b9590a88d4ad8 to your computer and use it in GitHub Desktop.
Save maolion/a617840b9590a88d4ad8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.page-wrapper .loading {
font-size: 12px;
font-style: normal;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 1.5px;
line-height: 100px;
text-align: center;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
z-index: 10;
}
.page-wrapper .loading.show {
display: block;
}
.page-wrapper .loading.show:after,
.page-wrapper .loading.show:before {
-webkit-animation-play-state : running;
-moz-animation-play-state : running;
-ms-animation-play-state : running;
-o-animation-play-state : running;
animation-play-state : running;
}
.page-wrapper .loading:before,
.page-wrapper .loading:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
opacity: 1;
-webkit-border-radius : 50px;
-moz-border-radius : 50px;
-ms-border-radius : 50px;
-o-border-radius : 50px;
border-radius : 50px;
z-index: 0;
-webkit-animation : loadingPulse 2s infinite linear;
-moz-animation : loadingPulse 2s infinite linear;
-ms-animation : loadingPulse 2s infinite linear;
-o-animation : loadingPulse 2s infinite linear;
animation : loadingPulse 2s infinite linear;
-webkit-animation-play-state : paused;
-moz-animation-play-state : paused;
-ms-animation-play-state : paused;
-o-animation-play-state : paused;
animation-play-state : paused;
}
.page-wrapper .loading:after {
-webkit-animation-delay : 1s;
-moz-animation-delay : 1s;
-ms-animation-delay : 1s;
-o-animation-delay : 1s;
animation-delay : 1s;
}
.page-wrapper .loading:before {
-webkit-transform : scale(1);
-moz-transform : scale(1);
-ms-transform : scale(1);
-o-transform : scale(1);
transform : scale(1);
background: rgba(255, 255, 255, 0.1);
}
@-webkit-keyframes loadingPulse {
0% {
-webkit-transform: scale(0.6);
opacity: 0;
}
33% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.4);
opacity: 0;
}
}
@-moz-keyframes loadingPulse {
0% {
-moz-transform: scale(0.6);
opacity: 0;
}
33% {
-moz-transform: scale(1);
opacity: 1;
}
100% {
-moz-transform: scale(1.4);
opacity: 0;
}
}
@-ms-keyframes loadingPulse {
0% {
-ms-transform: scale(0.6);
opacity: 0;
}
33% {
-ms-transform: scale(1);
opacity: 1;
}
100% {
-ms-transform: scale(1.4);
opacity: 0;
}
}
@-o-keyframes loadingPulse {
0% {
-o-transform: scale(0.6);
opacity: 0;
}
33% {
-o-transform: scale(1);
opacity: 1;
}
100% {
-o-transform: scale(1.4);
opacity: 0;
}
}
@keyframes loadingPulse {
0% {
transform: scale(0.6);
opacity: 0;
}
33% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
body{
background:#000;
}
</style>
</head>
<body>
<div class="page-wrapper">
<i class="loading show">LOADING<b class="after"></b><b class="before"></b></i>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment