loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

製作網頁如果預期會有較長時間的等待,通常會在等待的時間加入一個 loading 的動畫圖示來告知,避免用戶誤以為網頁沒有反應而離開,想要加入一個等待載入的動態圖示,可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器,不但可產生 GIF 檔外,還可產生出 CSS 或 SVG 檔,還提供範例語法,讓你輕易地運用到網頁裡。

§相關文章,還可以參閱:

如何使用 loading.io ?

1.使用瀏覽器進入 http://loading.io/ 網站,便可依照喜好點擊所要的載入動態圖示,並調整其顏色、長、寬、速度...等等,每次的調整都會即時反映在圖示上。

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

2.完成調整,便可依需要點擊 CSS、SVG、GIF,以產生相關的檔案或語法。

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

3.要學習如何運用,可將網頁往下拉,便有範例說明。

loading.io 可產生 CSS、SVG、GIF 的網頁 loading 動畫圖示產生器

在網頁要呈現照片的特殊效果,難免都要用到圖片編輯軟體中的濾鏡功能,不過現在透過 CSS 也能達到濾鏡的功能,filter.css 這個網站提供一組 CSS 語法並搭配說明,讓 div 區塊中的圖片就能立即套用濾鏡,呈現不同的風格特效。