自定义 Angular 4 首屏加载动画_angularjs

上一篇: 前端如何进行用户权限管理下一篇:Angular 5.0 来了! 有这些大变化

自定义 Angular 4 首屏加载动画

发布时间：2019-06-27 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了自定义 Angular 4 首屏加载动画，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

默认情况下，@L_360_0@应用程序在首次加载根组件时，会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画。
这是我们要实现首次加载的效果:
@H_126_10@
根组件标签中的内容
请注意，在你的入口文件index.htML中，默认的loading...只是插入到根组件标签之间：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


  
  <a href="http://www.js-code.com/tag/fan/" target="_blank" class="keywords">fan</a>cy Loading Screen
  
  
  



  Loading...


" tITle="" data-original-title="复制">
      
      
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fancy Loading Screen</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</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设置居中，给它设置一个更漂亮的字体，我们甚至在省略号上添加一个自定义动画：

      
      
      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;
  }
  

  Loading...
" title="" data-original-title="复制">
      
      
<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
@H_50_304@
好了，去创建属于你自己的loading吧!

脚本宝典总结

以上是脚本宝典为你收集整理的自定义 Angular 4 首屏加载动画全部内容，希望文章能够帮你解决自定义 Angular 4 首屏加载动画所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Angular Angular div flex flex post-format-gallery

上一篇: 前端如何进行用户权限管理下一篇:Angular 5.0 来了! 有这些大变化

猜你在找的angularjs相关文章

全站导航更多

最新angularjs教程

热门angularjs教程