Skip to content

Instantly share code, notes, and snippets.

@dmy3k
Last active August 29, 2015 14:23
Show Gist options
  • Save dmy3k/6213cbd1112c2a8131a9 to your computer and use it in GitHub Desktop.
Save dmy3k/6213cbd1112c2a8131a9 to your computer and use it in GitHub Desktop.
Zero element CSS loader
.loading {
position: relative;
}
.loading:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255,255,255,0.75);
z-index: 1010;
}
.loading:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
z-index: 1020;
background: url("loader.svg");
background-size: contain;
background-position: 50% 50%;
-webkit-animation-name: spin;
-webkit-animation-duration: 600ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 600ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 600ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Display the source blob
Display the rendered blob
Raw
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#ef5350" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
</path>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment