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.
Created
October 12, 2015 09:21
-
-
Save digital-surgeon/c181c5546da883ce9541 to your computer and use it in GitHub Desktop.
CSS Loading Spinners
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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); } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment