cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .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
            
          
!
            
              $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); }
}
            
          
!
999px
Loading ..................

Console