CSS Loading Spinners

10/12/2015 - 9:21 AM

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

style.css

$spCol: #000;
body {
	background-color: #f9f9f9;
	margin-top: 25px;
}
.col-sm-2 {
	padding: 10px;
	border-radius: 4px;
	height: 125px;
	margin-bottom: 10px;
}

.sp {
	width: 32px;
	height: 32px;
	clear: both;
	margin: 20px auto;
}


/* Spinner Circle Rotation */
.sp-circle {
	border: 4px rgba($spCol,0.25) solid;
	border-top: 4px rgba($spCol,1) solid;
	border-radius: 50%;
	-webkit-animation: spCircRot .6s infinite linear;
	animation: spCircRot .6s infinite linear;
}
@-webkit-keyframes spCircRot {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes spCircRot {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}



/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after {
	border-radius: 50%;
	background-color: $spCol;
	width: 18px;
	height: 18px;
	transform-origin: center center;
	display: inline-block;
}
.sp-3balls {
	position: relative;
	background-color: rgba($spCol,1);
	opacity: 1;
	-webkit-animation: spScaleAlpha 1s infinite linear;
	animation: spScaleAlpha 1s infinite linear;
}
.sp-3balls:before, .sp-3balls:after {
	content: '';
	position: relative;
	opacity: 0.25;
}
.sp-3balls:before {
	left: 30px;
	top: 0px;
	-webkit-animation: spScaleAlphaBefore 1s infinite linear;
	animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls:after {
	left: -30px;
	top: -23px;
	-webkit-animation: spScaleAlphaAfter 1s infinite linear;
	animation: spScaleAlphaAfter 1s infinite linear;
}
@-webkit-keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% { opacity: 0.25; }
	66% { opacity: 0.25; }
	100% { opacity: 1; }
}
@keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% {  opacity: 0.25; }
	66% { opacity: 0.25; }
	100% {  opacity: 1; }
}
@-webkit-keyframes spScaleAlphaBefore {
	0% { opacity: 0.25; }
	33% { opacity: 1; }
	66% { opacity: 0.25; }
}
@keyframes spScaleAlphaBefore {
	0% { opacity: 0.25; }
	33% { opacity: 1; }
	66% { opacity: 0.25; }
}
@-webkit-keyframes spScaleAlphaAfter {
	33% { opacity: 0.25; }
	66% { opacity: 1; }
	100% { opacity: 0.25; }
}
@keyframes spScaleAlphaAfter {
	33% { opacity: 0.25; }
	66% { opacity: 1; }
	100% { opacity: 0.25; }
}


/* Spinner VolumeButton */
.sp-volume {
	background-color: $spCol;
	border-radius: 50%;
	position: relative;
	-webkit-animation: spVolRot .6s infinite linear;
	animation: spVolRot .6s infinite linear;
}
.sp-volume:after {
	content: '';
	border-radius: 50%;
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	left: 5px;
	top: 5px;
	background-color: lighten($spCol,100%);
}
@-webkit-keyframes spVolRot {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes spVolRot {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}


/* Spinner Vortex */
.sp-vortex {
	border: 1px $spCol solid;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}
.sp-vortex:after, .sp-vortex:before {
	content: '';
	border-radius: 50%;
	position: absolute;
	width: inherit;
	height: inherit;
	-webkit-animation: spVortex 2s infinite linear;
	animation: spVortex 2s infinite linear;
}
.sp-vortex:before {
	border-top: 6px $spCol solid;
	top: -3px;
	left: calc( -50% - 3px );
	transform-origin: right center;
}
.sp-vortex:after {
	border-bottom: 6px $spCol solid;
	top: 3px;
	right: calc( -50% - 3px );
	transform-origin: left center;
}
@-webkit-keyframes spVortex {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes spVortex {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}



/* Spinner Slices */
.sp.sp-slices {
	border-radius: 50%;
	border-top: 16px rgba($spCol,0.75) solid;
	border-left: 16px rgba($spCol,0.25) solid;
	border-bottom: 16px rgba($spCol,0.25) solid;
	border-right: 16px rgba($spCol,0.25) solid;
	-webkit-animation: spSlices 1s infinite linear;
	animation: spSlices 1s infinite linear;
}
@-webkit-keyframes spSlices {
	0% {
		border-top: 16px rgba($spCol,0.75) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	25% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.75) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	50% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.75) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	75% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.75) solid;
	}
	100% {
		border-top: 16px rgba($spCol,0.75) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
}
@keyframes spSlices {
	0% {
		border-top: 16px rgba($spCol,0.75) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	25% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.75) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	50% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.75) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
	75% {
		border-top: 16px rgba($spCol,0.25) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.75) solid;
	}
	100% {
		border-top: 16px rgba($spCol,0.75) solid;
		border-right: 16px rgba($spCol,0.25) solid;
		border-bottom: 16px rgba($spCol,0.25) solid;
		border-left: 16px rgba($spCol,0.25) solid;
	}
}



/* Spinner Sphere */
.sp-sphere {
	border-radius: 50%;
	border-left: 0px $spCol solid;
	border-right: 0px $spCol solid;
	-webkit-animation: spSphere 1s infinite linear;
	animation: spSphere 1s infinite linear;
}
@-webkit-keyframes spSphere {
	0% {
		border-left: 0px $spCol solid;
		border-right: 0px $spCol solid;
	}
	33% {
		border-left: 32px $spCol solid;
		border-right: 0px $spCol solid;
	}
	34% {
		border-left: 0px $spCol solid;
		border-right: 32px $spCol solid;
	}
	66% {
		border-left: 0px $spCol solid;
		border-right: 0px $spCol solid;
	}
}
@keyframes spSphere {
	0% {
		border-left: 0px $spCol solid;
		border-right: 0px $spCol solid;
	}
	33% {
		border-left: 32px $spCol solid;
		border-right: 0px $spCol solid;
	}
	34% {
		border-left: 0px $spCol solid;
		border-right: 32px $spCol solid;
	}
	66% {
		border-left: 0px $spCol solid;
		border-right: 0px $spCol solid;
	}
}



/* Spinner Bars */
.sp-bars {
	position: relative;
	width: 10px;
	border: 1px $spCol solid;
	background-color: rgba($spCol,0.25);
	-webkit-animation: spBars 1s infinite linear;
	animation: spBars 1s infinite linear;
}
.sp-bars:after, .sp-bars:before {
	content:'';
	position: absolute;
	width: inherit;
	height: inherit;
	border: inherit;
	background-color: inherit;
	top: -1px;
}
.sp-bars:before {
	left: -20px;
	-webkit-animation: spBarsBefore 1s infinite linear;
	animation: spBarsBefore 1s infinite linear;
}
.sp-bars:after {
	right: -20px;
	-webkit-animation: spBarsAfter 1s infinite linear;
	animation: spBarsAfter 1s infinite linear;
}
@keyframes spBarsBefore {
	0% {
		transform: scale(1,1);
	}
	25% {
		transform: scale(1,1.25);
	}
	50% {
		transform: scale(1,0.75);
	}
	75% {
		transform: scale(1,1);
	}
	100% {
		transform: scale(1,1);
	}
}
@keyframes spBars {
	0% {
		transform: scale(1,1);
	}
	25% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(1,1.25);
	}
	75% {
		transform: scale(1,1);
	}
	100% {
		transform: scale(1,1);
	}
}
@keyframes spBarsAfter {
	0% {
		transform: scale(1,1);
	}
	25% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(1,0.75);
	}
	75% {
		transform: scale(1,1.25);
	}
	100% {
		transform: scale(1,1);
	}
}



/* Spinner Clock */
.sp-clock {
	border: 1px $spCol solid;
	border-radius: 50%;
	position: relative;
}
.sp-clock:before {
	content:'';
	border-left: 1px $spCol solid;
	position: absolute;
	top: 2px;
	width: 1px;
	height: calc( 50% - 2px );
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
    -ms-transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
	-webkit-animation: spClock 1s infinite linear;
	animation: spClock 1s infinite linear;
}
@-webkit-keyframes spClock {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes spClock {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}



/* Spinner Wave */
.sp-wave {
	border-radius: 50%;
	position: relative;
	opacity: 1;
}
.sp-wave:before, .sp-wave:after  {
	content:'';
	border: 1px $spCol solid;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	left:0px;
}
.sp-wave:before {
	transform: scale(1,1);
	opacity: 1;
	-webkit-animation: spWaveBe 0.6s infinite linear;
	animation: spWaveBe 0.6s infinite linear;
}
.sp-wave:after {
	transform: scale(0,0);
	opacity: 0;
	-webkit-animation: spWaveAf 0.6s infinite linear;
	animation: spWaveAf 0.6s infinite linear;
}
@-webkit-keyframes spWaveAf {
	from { -webkit-transform: scale(0.5,0.5); opacity: 0; }
	to { -webkit-transform: scale(1,1); opacity: 1; }
}
@keyframes spWaveAf {
	from { transform: scale(0.5,0.5); opacity: 0; }
	to { transform: scale(1,1); opacity: 1; }
}
@-webkit-keyframes spWaveBe {
	from { -webkit-transform: scale(1,1); opacity: 1; }
	to { -webkit-transform: scale(1.5,1.5); opacity: 0; }
}
@keyframes spWaveBe {
	from { -webkit-transform: scale(1,1); opacity: 1; }
	to { -webkit-transform: scale(1.5,1.5); opacity: 0; }
}



/* Spinner Texture */
.sp-texture {
	border: 1px $spCol solid;
	border-radius: 4px;
	position: relative;
	background: linear-gradient(45deg, transparent 49%, $spCol 50%, $spCol 50%, transparent 51%, transparent),
				linear-gradient(-45deg, transparent 49%, $spCol 50%, $spCol 50%, transparent 51%, transparent);
	background-size: 16px 16px;
	background-position: 0% 0%;
	-webkit-animation: spTexture 1s infinite linear;
	animation: spTexture 1s infinite linear;
}
@-webkit-keyframes spTexture {
	from { background-position: 0px 0px; }
	to { background-position: -16px 0px; }
}
@keyframes spTexture {
	from { background-position: 0px 0px; }
	to { background-position: -16px 0px; }
}




/* Spinner LoadBar */
.sp-loadbar {
	width: 50px;
	height: 18px;
	border: 1px $spCol solid;
	border-radius: 4px;
	background: linear-gradient(-60deg, transparent 0%, transparent 50%, $spCol 50%, $spCol 75%, transparent 75%, transparent);
	background-size: 20px 30px;
	background-position: 0px 0px;
	-webkit-animation: spLoadBar 0.8s infinite linear;
	animation: spLoadBar 0.8s infinite linear;
}
@-webkit-keyframes spLoadBar {
	from { background-position: 0px 0px; }
	to { background-position: -20px 0px; }
}
@keyframes spLoadBar {
	from { background-position: 0px 0px; }
	to { background-position: -20px 0px; }
}




/* Spinner Hydrogen */
.sp-hydrogen {
	position: relative;
	border: 1px $spCol solid;
	border-radius: 50%;
	-webkit-animation: spHydro 0.6s infinite linear;
	animation: spHydro 0.6s infinite linear;
}
.sp-hydrogen:before, .sp-hydrogen:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: $spCol;
	border-radius: 50%;
}
.sp-hydrogen:before {
	top: calc( 50% - 5px );
	left: calc( 50% - 5px );
}
.sp-hydrogen:after {
	top: -1px;
	left: -1px;
}
@-webkit-keyframes spHydro {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes spHydro {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}

index.html

.container.text-center
		.row
			.col-sm-2
				.sp.sp-circle
				h5 Circle
			.col-sm-2
				.sp.sp-3balls
				h5 3 Balls
			.col-sm-2
				.sp.sp-volume
				h5 Volume
			.col-sm-2
				.sp.sp-vortex
				h5 Vortex
			.col-sm-2
				.sp.sp-slices
				h5 Slices
			.col-sm-2
				.sp.sp-sphere
				h5 Sphere
		.row
			.col-sm-2
				.sp.sp-bars
				h5 Bars
			.col-sm-2
				.sp.sp-clock
				h5 Clock
			.col-sm-2
				.sp.sp-wave
				h5 Wave
			.col-sm-2
				.sp.sp-texture
				h5 Texture
			.col-sm-2
				.sp.sp-loadbar
				h5 LoadBar
			.col-sm-2
				.sp.sp-hydrogen
				h5 Hydrogen

CSS Loading Spinners.markdown

Rendered
Source

CSS Loading Spinners

12 Spinners HTML5 and CSS3 no images, just css animations and 1 div tag in the HTML. NO JS

A Pen by Harold Soto on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS Loading Spinners

CSS Loading Spinners