<div class="spinner">
  <div class="mask"></div>
</div>  
<div class="spinner color2">
  <div class="mask"></div>
</div>  
<div class="spinner color3">
  <div class="mask"></div>
</div>
<div class="clear"></div>

@import "compass/css3";

body {
	padding:100px;
}

$size:50px;
$color:#ff88dd;
$color2:#8899ff;
$color3:#55ffaa;
$thick:15px;



.spinner {
	position:relative;
	float:left;
	margin:10px;
	width:$size; 
	height:$size;
	border:$thick solid $color;
	border-radius:100%;
	
	animation: spin 3s infinite linear;

	.mask {
		overflow:hidden;
		position:absolute;
		top:-$thick;
		bottom:-$thick;
		right:$size/2; left:-$thick;
  
		&:after {
			content:''; 
			position:absolute; 
			top:0; 
			left:0; 
			border-radius:100%;
			width:$size; 
			height:$size;
			border:$thick solid lighten($color, 10%);
			overflow:hidden; 
		}


	}

	&.color2 {
		border-color: $color2;
		
		.mask:after {
			border-color:lighten($color2, 10%);;
		}
	}
	&.color3 {
		border-color: $color3;
		.mask:after {
			border-color:lighten($color3, 10%);;
		}
	}
}





@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframesspin pins {
  to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
  to { -ms-transform: rotate(360deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.clear {
  
  clear:both;
  float:none;
}
.loading {
  
    width:300px;
    position: relative;
    background:#d3d3d3;
     height:20px;
      padding:10px 5px;
    border-radius:15px;
  position: relative;
    display:bock;
    
    span {
      display:block;
      width:70%;
      position: absolute;
      top:5px;
      padding:10px 10px;
    height:auto;
      border-radius:15px;
      color:#fff;
      border:1px solid darken(#c16,10%);
    box-shadow:
       1px 1px 0 0 #c16;
      background-color: #c16;
      background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
      background-size:20px 20px;
    }
   
}