css 灵活的Google风格进度指示器

Posted 2021-05-13

{"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 }