自定義 Angular 4 首屏加載動(dòng)畫

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

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

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

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

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

請(qǐng)注意，在你的入口文件index.html中，默認(rèn)的loading...只是插入到根組件標(biāo)簽之間：




  
  Fancy Loading Screen
  
  
  



  Loading...

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

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


  
  I"m a purple loading message!

我們不必?fù)?dān)心這些樣式會(huì)影響我們的應(yīng)用程序加載后的內(nèi)容，因?yàn)橐磺卸急煌耆鎿Q掉。

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

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


  

  Loading...

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

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

loading.io

css-loaders

cssload

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83666.html

相關(guān)文章

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

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

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

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

Lemon_95 2019-08-20 17:24 評(píng)論0 收藏0
前端每周清單半年盤點(diǎn)之 Angular 篇

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

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

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

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

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

HackerShell 2019-08-21 12:05 評(píng)論0 收藏0