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 出生日期和身份证判断大全
Nov 13 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JQuery基础语法小结
Feb 27 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python中的with...as用法介绍
2015/05/28 Python
python实现批量监控网站
2016/09/09 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python中logging日志库实例详解
2020/02/19 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
工作经常出错的检讨书
2014/09/13 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
超市店长竞聘书
2015/09/15 职场文书
导游词之山东八大关
2019/12/18 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android