Last active
July 2, 2018 21:17
-
-
Save schuchard/9d43fa1dafb63b5ec7e2552327add5d6 to your computer and use it in GitHub Desktop.
Css spinners
This file contains 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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Page Title</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
// Source: https://codepen.io/Paolo-Duzioni/ | |
@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro"); | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
flex-wrap: wrap; | |
font-family: "Source Serif Pro", serif; | |
font-size: 16px; | |
background: #52A4D3; | |
counter-reset: spinnerCount; | |
} | |
.cell { | |
width: 25%; | |
} | |
.cell .wrapper { | |
position: relative; | |
display: flex; | |
justify-content: center; | |
height: 10rem; | |
margin: 1rem 1rem 0; | |
padding-top: 2.2rem; | |
background: rgba(255, 255, 255, 0.2); | |
} | |
.cell .wrapper::after { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
padding: 0.2rem; | |
text-align: center; | |
background: rgba(255, 255, 255, 0.25); | |
/* Increment the section counter */ | |
counter-increment: spinnerCount; | |
/* Display the counter on pseudo-elements */ | |
content: counter(spinnerCount); | |
} | |
.spinner { | |
width: 4rem; | |
height: 4rem; | |
} | |
.spinner.spinner1 { | |
border: 3px solid rgba(255, 255, 255, 0.25); | |
border-top-color: rgba(0, 0, 0, 0.5); | |
border-radius: 50%; | |
animation: rotation 0.8s ease infinite; | |
} | |
.spinner.spinner2 { | |
border: 3px solid transparent; | |
border-top-color: rgba(0, 0, 0, 0.5); | |
border-bottom-color: rgba(0, 0, 0, 0.5); | |
border-radius: 50%; | |
animation: rotation 0.8s ease infinite; | |
} | |
.spinner.spinner3 { | |
border-top: 3px solid rgba(0, 0, 0, 0.5); | |
border-right: 3px solid transparent; | |
border-radius: 50%; | |
animation: rotation 0.8s linear infinite; | |
} | |
.spinner.spinner4 { | |
background: rgba(0, 0, 0, 0.5); | |
animation: flip 1.2s ease infinite; | |
} | |
.spinner.spinner5 { | |
margin-top: 2rem; | |
overflow: hidden; | |
position: relative; | |
height: 0.5rem; | |
background: rgba(255, 255, 255, 0.25); | |
} | |
.spinner.spinner5::before { | |
content: ""; | |
position: absolute; | |
left: -130%; | |
width: 100%; | |
height: 100%; | |
background: rgba(0, 0, 0, 0.5); | |
animation: progress 4s linear infinite; | |
} | |
.spinner.spinner6 { | |
position: absolute; | |
top: 45%; | |
left: 50%; | |
background: #fff; | |
border-radius: 50%; | |
animation: pulse 1s ease-in-out infinite; | |
transform: translate(-50%, -50%) scale(0); | |
} | |
.spinner.spinner7 { | |
position: relative; | |
} | |
.spinner.spinner7::before, | |
.spinner.spinner7::after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 100%; | |
height: 100%; | |
border-radius: 50%; | |
transform: translate(-50%, -50%) scale(0); | |
} | |
.spinner.spinner7::before { | |
background: #fff; | |
animation: pulse2 2s ease-in-out infinite; | |
} | |
.spinner.spinner7::after { | |
background: #fff; | |
animation: pulse2 2s 1s ease-in-out infinite; | |
} | |
.spinner.spinner8 { | |
position: relative; | |
perspective: 200px; | |
} | |
.spinner.spinner8::before { | |
display: block; | |
content: ""; | |
width: 50%; | |
height: 50%; | |
background: rgba(0, 0, 0, 0.5); | |
animation: 2s flipWalker ease infinite; | |
} | |
@keyframes rotation { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes flip { | |
0% { | |
transform: perspective(120px) rotateX(0deg) rotateY(0deg); | |
} | |
50% { | |
transform: perspective(120px) rotateX(-180deg) rotateY(0deg); | |
} | |
100% { | |
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); | |
} | |
} | |
@keyframes progress { | |
0% { | |
left: -130%; | |
background: rgba(0, 0, 0, 0.5); | |
} | |
50% { | |
left: 130%; | |
background: rgba(0, 0, 0, 0.5); | |
} | |
51% { | |
background: rgba(255, 255, 255, 0.5); | |
} | |
100% { | |
background: rgba(255, 255, 255, 0.5); | |
} | |
} | |
@keyframes pulse { | |
0% { | |
transform: translate(-50%, -50%) scale(0); | |
opacity: 1; | |
} | |
100% { | |
transform: translate(-50%, -50%) scale(1); | |
opacity: 0; | |
} | |
} | |
@keyframes pulse2 { | |
0%, | |
100% { | |
transform: translate(-50%, -50%) scale(0); | |
opacity: 1; | |
} | |
50% { | |
transform: translate(-50%, -50%) scale(1); | |
opacity: 0; | |
} | |
} | |
@keyframes flipWalker { | |
0% { | |
transform: translate(0, 0) rotateX(0) rotateY(0); | |
} | |
25% { | |
transform: translate(100%, 0) rotateX(0) rotateY(180deg); | |
} | |
50% { | |
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); | |
} | |
75% { | |
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); | |
} | |
100% { | |
transform: translate(0, 0) rotateX(0) rotateY(360deg); | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner1"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner2"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner3"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner4"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner5"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner6"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner7"></div> | |
</div> | |
</div> | |
<div class="cell"> | |
<div class="wrapper"> | |
<div class="spinner spinner8"></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains 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
// GENERAL | |
*, *::before, *::after{ | |
box-sizing: border-box; | |
} | |
body{ | |
display: flex; | |
flex-wrap: wrap; | |
font-family: $font-family; | |
font-size: 16px; | |
background: $back; | |
// Spinner count reference | |
counter-reset: spinnerCount; | |
} | |
.cell{ | |
width: 25%; | |
.wrapper{ | |
position: relative; | |
display: flex; | |
justify-content: center; | |
height: 10rem; | |
margin: 1rem 1rem 0; | |
padding-top: 2.2rem; | |
background: rgba($white, .2); | |
&::after{ | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
padding: 0.2rem; | |
text-align: center; | |
background: rgba($white, .25); | |
/* Increment the section counter */ | |
counter-increment: spinnerCount; | |
/* Display the counter on pseudo-elements */ | |
content: counter(spinnerCount); | |
} | |
} | |
} | |
// SPINNERS STYLES | |
.spinner{ | |
// Common styles | |
width: 4rem; | |
height: 4rem; | |
// Individual styles | |
&.spinner1{ | |
border: 3px solid rgba($white, .25); | |
border-top-color: rgba($black, .5); | |
border-radius: 50%; | |
animation: rotation .8s ease infinite; | |
} | |
&.spinner2{ | |
border: 3px solid transparent; | |
border-top-color: rgba($black, .5); | |
border-bottom-color: rgba($black, .5); | |
border-radius: 50%; | |
animation: rotation .8s ease infinite; | |
} | |
&.spinner3{ | |
border-top: 3px solid rgba($black, .5); | |
border-right: 3px solid transparent; | |
border-radius: 50%; | |
animation: rotation .8s linear infinite; | |
} | |
&.spinner4{ | |
background: rgba($black, .5); | |
animation: flip 1.2s ease infinite; | |
} | |
&.spinner5{ | |
margin-top: 2rem; // just for centering the demo | |
overflow: hidden; | |
position: relative; | |
height: .5rem; | |
background: rgba($white, .25); | |
&::before{ | |
content: ''; | |
position: absolute; | |
left: -130%; | |
width: 100%; | |
height: 100%; | |
background: rgba($black, .5); | |
animation: progress 4s linear infinite; | |
} | |
} | |
&.spinner6{ | |
position: absolute; | |
top: 45%; | |
left: 50%; | |
background: $white; | |
border-radius: 50%; | |
animation: pulse 1s ease-in-out infinite; | |
transform: translate(-50%, -50%) scale(0); | |
} | |
&.spinner7{ | |
position: relative; | |
&::before, &::after{ | |
content: ''; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 100%; | |
height: 100%; | |
border-radius: 50%; | |
transform: translate(-50%, -50%) scale(0); | |
} | |
&::before{ | |
background: $white; | |
animation: pulse2 2s ease-in-out infinite; | |
} | |
&::after{ | |
background: $white; | |
animation: pulse2 2s 1s ease-in-out infinite; | |
} | |
} | |
&.spinner8{ | |
position: relative; | |
perspective: 200px; | |
&::before{ | |
display: block; | |
content: ''; | |
width: 50%; | |
height: 50%; | |
background: rgba($black, .5); | |
animation: 2s flipWalker ease infinite; | |
} | |
} | |
} | |
// ANIMATIONS | |
@keyframes rotation{ | |
from{ | |
transform: rotate(0deg); | |
} | |
to{ | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes flip{ | |
0%{ | |
transform: perspective(120px) rotateX(0deg) rotateY(0deg); | |
} | |
50%{ | |
transform: perspective(120px) rotateX(-180deg) rotateY(0deg); | |
} | |
100%{ | |
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); | |
} | |
} | |
@keyframes progress{ | |
0%{ | |
left: -130%; | |
background: rgba($black, .5); | |
} | |
50%{ | |
left: 130%; | |
background: rgba($black, .5); | |
} | |
51%{ | |
background: rgba($white, .5); | |
} | |
100%{ | |
background: rgba($white, .5); | |
} | |
} | |
@keyframes pulse{ | |
0%{ | |
transform: translate(-50%, -50%) scale(0); | |
opacity: 1; | |
} | |
100%{ | |
transform: translate(-50%, -50%) scale(1.0); | |
opacity: 0; | |
} | |
} | |
@keyframes pulse2{ | |
0%, 100%{ | |
transform: translate(-50%, -50%) scale(0); | |
opacity: 1; | |
} | |
50%{ | |
transform: translate(-50%, -50%) scale(1.0); | |
opacity: 0; | |
} | |
} | |
@keyframes flipWalker{ | |
0%{ | |
transform: translate(0, 0) rotateX(0) rotateY(0); | |
} | |
25%{ | |
transform: translate(100%, 0) rotateX(0) rotateY(180deg); | |
} | |
50%{ | |
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); | |
} | |
75%{ | |
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); | |
} | |
100%{ | |
transform: translate(0, 0) rotateX(0) rotateY(360deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment