自定義 Angular 4 首屏加載動畫

blair 發布于2019-08-20 17:32 / 639人閱讀

摘要：默認情況下，應用程序在首次加載根組件時，會在瀏覽器的顯示一個我們可以輕松地將修改成我們自己定義的動畫。這意味著我們可以在這些標簽之間放置任何內容，包括樣式定義，一旦加載完根組件，就可以完全清除它們。使用或者實現自定義加載動畫。

默認情況下，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云服務器云服務器首屏加載加載動畫實現加載動畫下拉加載動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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