angular - 这个效果的名称是什么？

Question

这个效果的名称是什么？

大家好，我正在用 Angular 5 做一个应用程序。 我见过一些页面显示正在加载的组件的形式，当整个页面完全加载时，它将显示出来。 它就像一个加载器，但非常有趣，因为它适用于小型组件。

当您上传附加图像的视频时，Youtube 就会产生这种效果。

你能告诉我这个与 Angular 一起使用的功能或框架的正确名称吗？

Answer 1

这些被称为骨架屏幕。这些只不过是带有动画效果的 gif 或普通 html，在实际数据加载时充当占位符。骨架屏幕有助于提高应用程序的感知性能。

这是一个演示:

// As soon as content is added to the skeleton screen container, the `:empty` pseudo-class won't match anymore and the background will be automatically removed.
document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.demo').innerHTML = '<h1>Injected content.</h1>';
})

/* 
Animated skeleton screen using CSS.

Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
*/
	.demo:empty {
    margin: auto;
		width: 500px;
		height: 600px; /* change height to see repeat-y behavior */
    
		background-image:
			radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			100px 200px, /* circle */
			50px 200px, /* highlight */
			150px 200px,
			350px 200px,
			300px 200px,
			250px 200px;

		background-position:
			0 0, /* circle */
			0 0, /* highlight */
			120px 0,
			120px 40px,
			120px 80px,
			120px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
				0 0,
				100% 0, /* move highlight to right */
				120px 0,
				120px 40px,
				120px 80px,
				120px 120px;
		}
	}

<button>Add content</button>
<div class="demo"></div>