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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 灵活的Google风格进度指示器相关的知识,希望对你有一定的参考价值。

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
// 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 }

以上是关于css 灵活的Google风格进度指示器的主要内容,如果未能解决你的问题,请参考以下文章

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

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

css 使用SVG和CSS动画尝试Chrome风格的进度指示器

圆形百分比进度条

如何将Google Form iframe嵌入具有灵活高度的html css(响应式)

如何将 Flutter 标签栏指示器更改为与 google play store 完全相同