PqJbMm

index.html

%div.spinner.large
%div.spinner
%div.spinner.small

PqJbMm.markdown

PqJbMm

A Pen by Craig Sullivan on CodePen.

License.

style.css

@import "bourbon";

body {
  background: #eee9df;
  text-align: center;
  padding-top: 3em;
}

$account-green: #37bc9b;
$flatmates-blue: #2f3a4a;
$rooms-red: #e9573e;
$roommates-blue: #3baeda;
$teamups-yellow: #f7bb42;

$spinner-width: 20px;
$spinner-margin: 10px;
$spinner-width-sm: 14px;
$spinner-margin-sm: 7px;
$spinner-width-lg: 10em;
$spinner-border-width-lg: 0.5em;

.spinner {
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: $rooms-red;
  border-right-color: $account-green;
  border-bottom-color: $teamups-yellow;
  border-left-color: $roommates-blue;
  border-radius: 50%;
  margin: -1*$spinner-margin $spinner-margin 0 -1*$spinner-margin;
  height: $spinner-width;
  width: $spinner-width;
  position:relative;
  top: 7px;
  display: inline-block;

  @include animation(spinner-animation 800ms infinite linear);
}

.spinner.small {
  top: 4px;
  margin: -1*$spinner-margin-sm $spinner-margin-sm 0 -1*$spinner-margin-sm;
  height: $spinner-width-sm;
  width: $spinner-width-sm;
}

.spinner.large {
  width: $spinner-width-lg;
  height: $spinner-width-lg;
  border-width: $spinner-border-width-lg;
  margin: 0;
}

@-webkit-keyframes spinner-animation {
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spinner-animation {
  100% { -moz-transform: rotate(360deg); }
}

@keyframes spinner-animation {
  100% { transform: rotate(360deg); }
}