使用Loader.css和css-spinners來制作加載動(dòng)畫的方法

Loader.css
當(dāng)網(wǎng)頁(yè)的頁(yè)面大小較大,用戶加載可能需要較長(zhǎng)的時(shí)間,在這些情況下,我們一般會(huì)用到(加載)loading動(dòng)畫,提示于用戶頁(yè)面在加載中,這些UX常識(shí)我想很多設(shè)計(jì)師都懂,但做一個(gè)GIF動(dòng)畫有點(diǎn)麻煩,為了方便,看看今天分享的Loader.css,僅用CSS樣式就能實(shí)現(xiàn)一個(gè)loading動(dòng)畫效果。
當(dāng)前有35個(gè)動(dòng)畫效果,所以選擇還是挺多的。
使用方法
Step 1: 引入 loaders.min.css 和 loaders.css.js,這個(gè)JS僅是為了簡(jiǎn)化動(dòng)畫的DIV標(biāo)簽,如果不加這個(gè)JS,那么你的動(dòng)畫就必須加上對(duì)應(yīng)數(shù)量DIV標(biāo)簽才能正常顯示動(dòng)畫,所以建議加上,這樣語義化好會(huì)好些。
- <link rel="stylesheet" type="text/css" href="loaders.min.css">
- <script type="text/javascript" src="loaders.css.js"></script>
Step 2: HTML代碼,給loading元素加入動(dòng)畫class,如下:
- <div class="loader-inner ball-pulse"></div>
改變加載動(dòng)畫顏色
此外你還要可以為loading動(dòng)畫加上顏色,代碼如下:
- .ball-grid-pulse > div {
- background: orange;
- }
css-spinners
如果你從Loader.css上找不到喜歡的樣式,那就看看今天小編分享的css-spinners,它自帶的CSS加載樣式很漂亮,圖案色彩豐富,花樣多多,就算不用它的CSS,也可以按它的動(dòng)畫來做成GIF圖像。
loading樣式有花形、心形、指針、圓形旋轉(zhuǎn)、進(jìn)度條以及常見的菊花加載圖案:
使用教程
CSS Spinners除了輕量級(jí)外,使用也十分的簡(jiǎn)單,下面來看看教學(xué):
STEP 1: 引入CSS文件
加載動(dòng)畫樣式有單個(gè)以及全部,如果用戶只需要一個(gè)加載動(dòng)畫,就選擇對(duì)應(yīng)的CSS文件。
單個(gè)動(dòng)畫引用,比如這里我們只需要心形圖案的加載樣式,對(duì)應(yīng)樣式文件是heartbeat.css
- <head>
- ...
- <link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">
- </head>
全部加載樣式引用,樣式表文件是 spinners.css,但一般情況下我們只引用一個(gè)就夠了。
- <head>
- ...
- <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinners.css" type="text/css">
- </head>
STEP 2: HTML代碼
HTML部分要加入對(duì)應(yīng)的loading樣式class即可
- <div class="heartbeat-loader">
- Loading…
- </div>
好了,就是這么簡(jiǎn)單,喜歡的可以放到你的項(xiàng)目上哦!
相關(guān)文章
css 命名:BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名:BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友2020-08-24CSS3制作ajax loader icon實(shí)現(xiàn)思路及代碼
用到了兩個(gè)CSS3屬性transform、animation,實(shí)現(xiàn)原理為:transform控制每個(gè)小方塊在Y軸的偏移,rotate控制旋轉(zhuǎn)的角度,scale縮放至原大小的一半,具體祥看下文,希望對(duì)大家2013-08-25在vue-cli中使用css-loader實(shí)現(xiàn)css module
這篇文章主要介紹了在vue-cli中使用css-loader實(shí)現(xiàn)css module,本文給大家介紹的非常想詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-07