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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
JS闭包可被利用的常见场景小结
Apr 09 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
自己的js工具 Event封装
2009/08/21 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
浅谈python写入大量文件的问题
2018/11/09 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Python如何重新加载模块
2020/07/29 Python
python线程里哪种模块比较适合
2020/08/02 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
中间件分为哪几类
2016/09/18 面试题
文化宣传方案
2014/03/13 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
2014年稽查工作总结
2014/12/20 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server