骨架装入器在过去的几年里变得很受欢迎。此类加载器的目的是展示一个加载内容的占位符。

通常情况下,骨架装入器显示一个灰色的模板反映整个视图的结构和外观。它给出了一个什么样的内容是每个块加载,比如图像、文本等。

虽然我们可以用HTML / CSS实现此类加载器,有趣的是,开源现成的骨架装入器框架角等。我们可以用最少的努力。

进入ngx-skeleton-loader

ngx-skeleton-loader是最受欢迎的骨架装入器模块角npm这些天。

使用这个库,将它安装在您的项目与npm:

npm安装ngx-skeleton-loader

然后您需要添加NgxSkeletonLoaderModule作为一个依赖在你的应用程序模块:

从“ngx-skeleton-loader”进口{NgxSkeletonLoaderModule};
…

@NgModule ({
声明:[
…
),
进口:[
…
NgxSkeletonLoaderModule,
…
),
…
})
出口类AppModule {}

这是它!现在,您可以在代码中使用骨架装入器组件。在这个例子中,我们将展示一个圈骨架装入器:

< ngx-skeleton-loader数=“1”外观= "圆" > < / ngx-skeleton-loader >

这个想法是为了显示框架组件数据加载时,我们用一个简单的所能达到的水平ngIf指示该组件:

< ngx-skeleton-loader * ngIf = " !contentLoaded”外观= "圆" >

渲染选项可用?

与ngx-skeleton装载机,有两种表现:圆或行。

这些组件也支持不同的动画:进步(默认),progress-dark,脉冲。

这是一个例子,显示一块2行使用脉冲动画:

< ngx-skeleton-loader数= " 2 "外观= "线”动画=“脉冲”>
< / ngx-skeleton-loader >

上面的代码会导致这个骨架装入器:

这是一个Stackblitz例子说明所有的图形和动画的不同可能的组合:

如何充分定制骨架装入器吗?

可以使用自定义CSS改变骨架装入器的所有方面。的主题输入值可以通过这样的定制骨架装入器。

例如,下面是一个简单的例子,改变圆角边框、颜色、和高度的骨架装入器行:

< ngx-skeleton-loader
数= " 2 "
外观= "线"
动画=“进步”
(主题)= " {
“背景颜色”:“# FFBF00”,
高度:“30 px”,
“border - radius”: 0
}”
>
< / ngx-skeleton-loader >

导致:

和主题选项的更多信息,您可以检查官方文档:https://www.npmjs.com/package/ngx-skeleton-loader

一些更多的例子这里是可用的:https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html。

我的名字是betway必威滚球。我是谷歌开发者角度,专家顾问和教练角训练我帮助web开发团队学习和熟悉角。

如果你需要任何帮助web开发,随时取得联系!

如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。你也可以订阅中这里。