Skip to content

Instantly share code, notes, and snippets.

@msisto

msisto/CSS Loading Spinner

Last active December 30, 2015 04:39
Show Gist options
  • Save msisto/7777838 to your computer and use it in GitHub Desktop.
Save msisto/7777838 to your computer and use it in GitHub Desktop.
Download ZIP
CSS-only Loading Spinner
Raw
CSS Loading Spinner
Another CSS-Only Loading Spinner
--------------------------------
A [Pen](http://codepen.io/msisto/pen/LntJe) by [Matt Sisto](http://codepen.io/msisto) on [CodePen](http://codepen.io/).
[License](http://codepen.io/msisto/pen/LntJe/license).
Raw
index.html
<body>
<div class="loading-spinner"></div>
</body>
Raw
style.scss
@import "compass";
$size: 24px;
$color: #fff;
$speed: 0.65s;
body {
background: #3F5EF0;
}
// Rotate Forever
//********************************************************//
@mixin rotate-forever {
0% { @include transform(rotate(0deg)); }
100% { @include transform(rotate(360deg)); }
}
@-webkit-keyframes rotate-forever { @include rotate-forever; }
@-moz-keyframes rotate-forever { @include rotate-forever; }
@keyframes rotate-forever { @include rotate-forever; }
// Loading Spinner
//********************************************************//
.loading-spinner {
&::before {
@include animation-duration($speed);
@include animation-iteration-count(infinite);
@include animation-name(rotate-forever);
@include animation-timing-function(linear);
@include position(absolute, 50% 0 0 50%);
border: 5px solid $color;
border-right-color: transparent;
border-radius: 50%;
content: '';
display: inline-block;
height: $size;
line-height: 0;
margin-left: -($size/2);
margin-top: -($size/2);
width: $size;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment