CSS spinners
- Leanest spinner
- Circle spinner
- Bidimensional spinner
CSS spinners
$size: 0.5em; | |
$color: #c22; | |
.loading{ | |
box-sizing: border-box; | |
position: relative; | |
display: inline-block; | |
padding: $size; | |
vertical-align: middle; | |
text-align: center; | |
background-color: transparent; | |
border: 5px solid transparent; | |
border-top-color: $color; | |
border-bottom-color: $color; | |
border-radius: 50%; | |
} | |
.outer{ | |
animation: spin 1s infinite; | |
} | |
.inner{ | |
animation: spin 1s infinite; | |
} | |
@keyframes spin{ | |
0%: { | |
transform: rotateZ(0deg); | |
} | |
100%: { | |
transform: rotateZ(360deg); | |
} | |
} |
<div class="loading outer"> | |
<div class="loading inner"></div> | |
</div> |
.loading { | |
border-bottom: 6px solid rgba(0, 0, 0, .1); | |
border-left: 6px solid rgba(0, 0, 0, .1); | |
border-right: 6px solid rgba(0, 0, 0, .1); | |
border-top: 6px solid rgba(0, 0, 0, .4); | |
border-radius: 100%; | |
height: 50px; | |
width: 50px; | |
animation: rot .6s infinite linear; | |
} | |
@keyframes rot { | |
from {transform: rotate(0deg);} | |
to {transform: rotate(359deg);} | |
} |
<div class="loading"></div> |
@keyframes spin { | |
to { transform: rotate(1turn); } | |
} | |
.progress { | |
position: relative; | |
display: inline-block; | |
width: 5em; | |
height: 5em; | |
margin: 0 .5em; | |
font-size: 12px; | |
text-indent: 999em; | |
overflow: hidden; | |
animation: spin 1s infinite steps(8); | |
} | |
.small.progress { | |
font-size: 6px; | |
} | |
.large.progress { | |
font-size: 24px; | |
} | |
.progress:before, | |
.progress:after, | |
.progress > div:before, | |
.progress > div:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 2.45em; /* (container width - part width)/2 */ | |
width: .1em; | |
height: 1.5em; | |
border-radius: .2em; | |
background: #eee; | |
box-shadow: 0 3.5em #eee; /* container height - part height */ | |
transform-origin: 50% 2.5em; /* container height / 2 */ | |
} | |
.progress:before { | |
background: #555; | |
} | |
.progress:after { | |
transform: rotate(-45deg); | |
background: #777; | |
} | |
.progress > div:before { | |
transform: rotate(-90deg); | |
background: #999; | |
} | |
.progress > div:after { | |
transform: rotate(-135deg); | |
background: #bbb; | |
} |
<div class="small progress"><div>Loading…</div></div> | |
<div class="progress"><div>Loading…</div></div> | |
<div class="large progress"><div>Loading…</div></div> |