<div><span class="loader"></span></div>
html {
height:100%;
padding:0;
margin:0;
}
body {
background:#212121;
text-align:center;
display:table;
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
display:table-cell;
text-align:center;
vertical-align:middle;
}
.loader {
display:inline-block;
border:0.2em solid white;
width:0.25em;
height:0.25em;
border-radius:100%;
-moz-animation: loading 1s ease infinite alternate;
-webkit-animation: loading 1s ease infinite alternate; /* Safari and Chrome */
animation: loading 1s ease infinite alternate;
}
@-webkit-keyframes loading /* Safari and Chrome */
{
from {
}
to {
width:1.5em;
height:1.5em;
border:0.2em solid rgba(255,255,255,0.1);
}
}
@-moz-keyframes loading /* Safari and Chrome */
{
from {
}
to {
width:1.5em;
height:1.5em;
border:0.2em solid rgba(255,255,255,0.1);
}
}
keyframes loading
{
from {
}
to {
width:1.5em;
height:1.5em;
border:0.2em solid rgba(255,255,255,0.1);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.