自定義 Angular 4 首屏加載動畫

blair 發(fā)布于2019-08-20 17:32 / 706人閱讀

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

默認情況下，Angular應(yīng)用程序在首次加載根組件時，會在瀏覽器的顯示一個loading... 我們可以輕松地將loading修改成我們自己定義的動畫。

這是我們要實現(xiàn)首次加載的效果:

根組件標簽中的內(nèi)容

請注意，在你的入口文件index.html中，默認的loading...只是插入到根組件標簽之間：




  
  Fancy Loading Screen
  
  
  



  Loading...

如果您在加載完根組件檢查應(yīng)用程序，則無法找到loading... 的文字，因為它在應(yīng)用加載完成后被我們自己定義的組件替換掉。

這意味著我們可以在這些標簽之間放置任何內(nèi)容，包括樣式定義，一旦Angular加載完根組件，就可以完全清除它們。


  
  I"m a purple loading message!

我們不必擔(dān)心這些樣式會影響我們的應(yīng)用程序加載后的內(nèi)容，因為一切都被完全替換掉。

現(xiàn)在你可以在那里隨意的做任何事情。使用css或者svg實現(xiàn)自定義加載動畫。

在我們的示例中，我們給頁面一個粉紅色的背景，我們使用Flexbox 將loading設(shè)置居中，給它設(shè)置一個更漂亮的字體，我們甚至在省略號上添加一個自定義動畫：


  

  Loading...

這樣我們就實現(xiàn)了上圖的加載效果了，點擊這里查看原文

分享幾個loading效果的在線素材網(wǎng)：

loading.io

css-loaders

cssload

好了，去創(chuàng)建屬于你自己的loading吧!

GPU云服務(wù)器云服務(wù)器首屏加載加載動畫實現(xiàn)加載動畫下拉加載動畫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83666.html

相關(guān)文章

前端每周清單：Node.js 微服務(wù)實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務(wù)實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務(wù)實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
前端每周清單第 18 期：Firefox、Chrome、React、Angular發(fā)布新版本；提升R

摘要：本文即以簡單的回歸擬合為例，從最基礎(chǔ)的庫安裝數(shù)據(jù)導(dǎo)入數(shù)據(jù)預(yù)處理到模型訓(xùn)練模型預(yù)測介紹了如何使用進行簡單的機器學(xué)習(xí)任務(wù)。前端每周清單第 18 期：Firefox、Chrome、React、Angular發(fā)布新版本；提升RN應(yīng)用性能的方法為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請與InfoQ中文站聯(lián)系。從屬于筆者的 Web 前端入門與工程實踐的前端每周清單系列系列；部分...

Lemon_95 2019-08-20 17:24 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學(xué)習(xí)與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
新鮮出爐的8月前端面試題

摘要：前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎(chǔ)試題主要考察前端技基礎(chǔ)是否扎實，是否能夠?qū)⑶岸酥R體系串聯(lián)。前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎(chǔ)試題: 主要考察前端技基礎(chǔ)是否扎實，是否能夠?qū)⑶岸酥R體系串聯(lián)。一種是開放式問題: 考察業(yè)務(wù)積累，是否有自己的思考，思考問題的方式，這類問題沒有標準答案。基礎(chǔ)題題目的答...

qingshanli1988 2019-08-23 10:47 評論0 收藏0
前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0