Flexible Google-style progress indicator
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<div class="small progress">Loading…</div>
<div class="progress">Loading…</div>
<div class="large progress">Loading…</div>
/**
* Flexible Google-style progress indicator
*/
@keyframes progress {
50% { border-width: .5em 0; }
to { border-width: .5em 0 0 0; }
}
@keyframes rotate {
to { transform: rotate(-270deg); }
}
.progress {
display: inline-block;
font-size: 50px; /* Size of the progress indicator */
width: 1em; height: 1em;
border: solid white;
border-top-color: #ddd;
border-width: 0 0 .5em 0;
border-radius: 50%;
box-sizing: border-box;
margin: .1em .2em;
background: linear-gradient(white 50%, #ddd 50%);
background-origin: border-box;
transform: rotate(90deg);
animation: rotate 1s steps(4) infinite,
progress .25s linear infinite alternate;
text-indent: 99em;
overflow: hidden;
}
.progress.small { font-size: 16px }
.progress.large { font-size: 100px }