CSS: Loading spinner squared circle look - css

Question

I am trying to implement a spinner only using CSS that looks like on following image, see the picture. Only one piece of the spinner is filled with color at a time.
In the following fiddle, there is a similar spinner, but I need to rotate the whole spinner (22.5°) and also to modify its rays.
http://jsfiddle.net/ucsnaukf/
HTML:
<div class="spinner"><div>Loading…</div></div>
CSS:
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.spinner {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
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 */
}
.spinner:before {
background: blue;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Can anyone help?

Answer 1

Here's a start for you (http://jsfiddle.net/ucsnaukf/73/):
<--! HTML -->
<div class="wrapper">
<div class="spinner">
<div>Loading…
</div>
</div>
<div class="circ"></div>
</div>
/* CSS */
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.wrapper{
border:1px solid white;
border-radius:100%;
position:relative;
width: 5em;
height: 5em;
border-radius:999px;
overflow:hidden;
}
/* Circular mask */
.circ{
border:1px solid WHITE;
position:absolute;
top:10%;
left:10%;
right:0;
bottom:0;
width:55%;
height:55%;
background-color:#fff;
border-radius:999px;
}
.spinner {
border:1px solid white;
border-radius:100%;/* Round the border */
position: absolute;
display: inline-block;
width: 5em;
height: 5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 1.8em; /* (container width - part width)/2 */
width: 1.4em; /* longer */
height: .8em; /* shorter */
background: #eee;
box-shadow: 0 4.2em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: purple;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Looks a bit flower like, but continue playing with it and you'll get it the way you want.
You may want to consider used one of the many, great looking, free to use spinners available on the web... check out this massive collection for example: http://codepen.io/collection/HtAne/