Skip to content

Instantly share code, notes, and snippets.

@ui2code
Created November 27, 2014 05:32
Show Gist options
  • Select an option

  • Save ui2code/f25116925831d98e2179 to your computer and use it in GitHub Desktop.

Select an option

Save ui2code/f25116925831d98e2179 to your computer and use it in GitHub Desktop.
Loading CSS
// HTML
<div class="loader"></div>
// CSS
html {height:100%; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:300; background:#222 -webkit-radial-gradient(50% 0, ellipse farthest-corner, #444 0%, #222 100%)}
.loader {width:8px; height:8px; margin:40px auto; opacity:0.5; border-radius:50%; box-shadow: 0 -14px 0 rgba(255,255,255,0.8), 10px -10px 0 rgba(255,255,255,0.7), 14px 0px 1px rgba(255,255,255,0.6), 10px 10px 1px rgba(255,255,255,0.5), 0px 14px 2px rgba(255,255,255,0.4), -10px 10px 2px rgba(255,255,255,0.3), -14px 0px 3px rgba(255,255,255,0.2), -10px -10px 3px rgba(255,255,255,0.1); -webkit-transform-origin: 50%; -webkit-animation:load 0.5s steps(8, end) infinite;}
@-webkit-keyframes load {
0% {-webkit-transform: rotate(0);}
100% {-webkit-transform: rotate(360deg);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment