網設必備-《spin.js》線上Loading動態圖示產生器(支援IE6)

梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
  之前曾分享《SVG Loading》線上Loading動態圖示產生器,就可選擇各式各樣的Loading圖示,同時還可任意的放大縮小不失真,再搭配CSS3的動畫,就可完全的取代傳統的Gif動畫,但無論是SVG還是CSS3,都限於新版的瀏覽器才有支援,因此若是舊版的瀏覽器就無法使用,因此梅干最近找到一個不錯的線上Loading產生器,可設定Loading動畫的速度、方向、線條粗細...等,同時還支援舊版的瀏覽器,且動畫還相當的順暢,因此有需要的朋友,不妨參考看看囉!

spin.js:
網站名稱:spin.js
網站網址:http://fgnass.github.io/

Step1
進入網站後,從右邊的控制軸,分別可設定Loading動畫的樣式與速度。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step2
設定好後,將下方的程式碼拷貝下來。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step3
再將程式碼,貼到頁面裡。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step4
接著預覽一下,會發現圖示,只出現了四分之一。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step5
回到程式碼的地方,將left與top後方,輸入半徑值的二倍。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step6
哈!這樣就會看到完整的Loading動畫圖示啦!
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
Step7
在網站中可看到,所支援的瀏覽器與版本,連IE6都可跑,真是太酷了。
梅問題-jQueryd套件-《spin.js》線上Loading動畫產生器
[範例預覽] [範例下載]

相關文章

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    chozie 說道:

    我的chrome好像不怎么支持哎

    回應:
    請問你是幾版的

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座