border-spinner.css

/*
CSS Border Spinner by Benjamin Bolgrin
*/

#spinner-wrapper {
	margin: auto;
	width: 60px; /* must be twice the size of spinner's border-size */
	background-color: rgba(255, 255, 255, 0.65);
	background: rgba(255, 255, 255, 0.65);
  	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
}

#spinner {
	border: 30px solid transparent; /* border-size must be half the width of spinner-container's width */
	animation: border-animation 1s ease-out infinite, shadow-animation 1s ease-out infinite;
}

@keyframes border-animation {
	0%   {
  		border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.125) rgba(0, 0, 0, 0.25);
    }
    25%   {
    	border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.125);
  	}
    50%   {
    	border-color: rgba(0, 0, 0, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.06);
  	}
  	75%   {
  		border-color: rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5);
  	}
  	100%   {
  		border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.125) rgba(0, 0, 0, 0.25);
    }
}

@keyframes shadow-animation {
	0%   {
  		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.5);
    }
    25%   {
    	box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
  	}
    50%   {
    	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  	}
  	75%   {
  		box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.5);
  	}
  	100%   {
  		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.5);
    }
}