Angular4怎么自定义首屏的加载动画

　　介绍

这篇文章将为大家详细讲解有关Angular4怎么自定义首屏的加载动画,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>前言

相信大家都知道,在默认情况下,角应用程序在首次加载根组件时,会在浏览器的显示一个加载…我们可以轻松地将加载修改成我们自己定义的动画。

<强>这是我们要实现首次加载的效果:

Angular4怎么自定义首屏的加载动画

<强>根组件标签中的内容

<强>请注意:在你的入口文件index . html中,默认的加载…只是插入到根组件标签之间:

& lt; ! doctype  html> 　　& lt; html> 　　& lt; head> 　　,& lt; meta  charset=皍tf-8"比; 　　,& lt; title> Fancy  Loading  Screen 　　,& lt; base  href=" https://www.yisu.com/zixun/rel="外部nofollow”> 　　 　　 　　加载… 　　 　　 　　

如果您在加载完根组件检查应用程序,则无法找到加载…的文字,因为它在应用加载完成后被我们自己定义的组件替换掉。

这意味着我们可以在这些标签之间放置任何内容,包括样式定义,一旦角加载完根组件,就可以完全清除它们。

& lt; app-root> 　　,& lt; style> 　　,app-root  { 　　,,颜色:紫色; 　　,} 　　,& lt;/style> 　　,我# 39;m  a  purple  loading 消息! 　　& lt;/app-root>

我们不必担心这些样式会影响我们的应用程序加载后的内容,因为一切都被完全替换掉。

现在你可以在那里随意的做任何事情。使用css或者svg实现自定义加载动画。

在我们的示例中,我们给页面一个粉红色的背景,我们使用Flexbox将加载设置居中,给它设置一个更漂亮的字体,我们甚至在省略号上添加一个自定义动画:

& lt; app-root> 　　,& lt; style> 　　,app-root  { 　　,显示:flex; 　　,justify-content:中心; 　　,对齐项目:中心; 　　,身高:100 vh; 　　 　　,颜色:粉色; 　　,首字母,大写; 　　,字体类型:苹果系统, 　　BlinkMacSystemFont才能, 　　“才能Segoe  UI" 　　Roboto才能, 　　Oxygen-Sans才能, 　　Ubuntu,才能 　　Cantarell才能, 　　Helvetica,才能 　　无衬线才能; 　　,字体大小:2.5 em; 　　,文本阴影:2 px  2 px  10 px  rgba (0, 0, 0, 0.2); 　　,} 　　,body  { 　　背景:大敌;鲑鱼; 　　,保证金:0; 　　,填充:0; 　　,} 　　 　　,@keyframes  dots  { 　　,50% { 　　变换才能:translateY (-.4rem); 　　,} 　　,100% { 　　变换才能:translateY (0); 　　,} 　　,} 　　 　　,.d  { 　　动画:大敌;dots  1.5 s  ease-out 无限; 　　,} 　　,.d-2  { 　　,animation-delay: 0; 　　,} 　　,.d-3  { 　　,animation-delay: 1; 　　,} 　　,& lt;/style> 　　 　　,Loading & lt; span 类=癲  d-2"祝辞。;/span> & lt; span 类=癲  d-3"祝辞。;/span> 　　& lt;/app-root>

这样我们就实现了上图的加载效果了。

关于“Angular4怎么自定义首屏的加载动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

Angular4怎么自定义首屏的加载动画