Angular4如何自定义首屏的加载动画详解


Posted in Javascript onJuly 26, 2017

前言

相信大家都知道,在默认情况下,Angular应用程序在首次加载根组件时,会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画。下面话不多说,来一起看看详细的介绍:

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

Angular4如何自定义首屏的加载动画详解

根组件标签中的内容

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

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Fancy Loading Screen</title>
 <base href="/" rel="external nofollow" >
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" >
</head>
<body>

 <app-root>Loading...</app-root>

</body>
</html>

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

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

<app-root>
 <style>
 app-root {
  color: purple;
 }
 </style>
 I'm a purple loading message!
</app-root>

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

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

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

<app-root>
 <style>
 app-root {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;

 color: pink;
 text-transform: uppercase;
 font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen-Sans,
  Ubuntu,
  Cantarell,
  Helvetica,
  sans-serif;
 font-size: 2.5em;
 text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
 }
 body {
 background: salmon;
 margin: 0;
 padding: 0;
 }

 @keyframes dots {
 50% {
  transform: translateY(-.4rem);
 }
 100% {
  transform: translateY(0);
 }
 }

 .d {
 animation: dots 1.5s ease-out infinite;
 }
 .d-2 {
 animation-delay: .5s;
 }
 .d-3 {
 animation-delay: 1s;
 }
 </style>

 Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>

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

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

  • loading.io
  • css-loaders
  • cssload

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 #Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 #Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
Python3 修改默认环境的方法
2019/02/16 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
师恩难忘教学反思
2014/04/27 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
python实现的web监控系统
2021/04/27 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Go语言grpc和protobuf
2022/04/13 Golang
浅析JavaScript中的变量提升
2022/06/01 Javascript