自定义 Angular 4 首屏加载动画

blair 发布于2019-08-20 17:32 / 511人阅读

摘要：默认情况下，应用程序在首次加载根组件时，会在浏览器的显示一个我们可以轻松地将修改成我们自己定义的动画。这意味着我们可以在这些标签之间放置任何内容，包括样式定义，一旦加载完根组件，就可以完全清除它们。使用或者实现自定义加载动画。

默认情况下，Angular应用程序在首次加载根组件时，会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画。

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

根组件标签中的内容

请注意，在你的入口文件index.html中，默认的loading...只是插入到根组件标签之间：




  
  Fancy Loading Screen
  
  
  



  Loading...

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

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


  
  I"m a purple loading message!

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

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

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


  

  Loading...

这样我们就实现了上图的加载效果了，点击这里查看原文

分享几个loading效果的在线素材网：

loading.io

css-loaders

cssload

好了，去创建属于你自己的loading吧!

GPU服务器云服务器首屏加载加载动画实现加载动画下拉加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83666.html

前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升R

摘要：本文即以简单的回归拟合为例，从最基础的库安装数据导入数据预处理到模型训练模型预测介绍了如何使用进行简单的机器学习任务。前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升RN应用性能的方法为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列；部分...

Lemon_95 2019-08-20 17:24 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0