1圖片準備GIF靜態(tài)長圖，保存至文件夾2工具使用Dreamweaver進行操作五項目實現(xiàn)1創(chuàng)建div容器，加入class屬性2CSS設(shè)置定義div的寬高位置背景色加載圖片，設(shè)定寬高，實現(xiàn)動畫效果使用CSS3 animation中的steps屬性，表示動畫在45個關(guān)鍵幀之間切換，與45幀相匹配，動畫時。

HTML中插入gif格式的圖片有幾種簡單的方法可以實現(xiàn)1直接插入lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead ltmeta。

頁面加載之前是沒有任何事件的所謂加載之前的動畫是形如以下的代碼 lthtml ltbody onload=quot第一個div隱藏，第二個div顯示quot ltdiv ltimg src=#39loadinggif#39 style=quotwidth 100%quot ltdiv ltdiv style=quotdiaplay quot lt！頁面內(nèi)容在這里加載 ltdiv ltbody lthtml。

loadingDivinnerHTML = quotltimg src=#39imagesgoodgif#39Submit finnished！quot else loadingDivinnerHTML = quotThere is something wrong with form submit！ quotfontcolorquotredquot + xml。

可以用html5實現(xiàn)，也可以做成gif的圖片，你只需要設(shè)置為和你程序設(shè)置一樣的時間然后進度條自動結(jié)束就好了用圖片是最好實現(xiàn)，用ps軟件就可以制作這個的實現(xiàn)，有很多中方法，簡單的，是使用 DIV 嵌套，例如ltdiv style=quotwidth 100px height 10px border solid 1px #ccctextalign leftquot。

一image 作為背景圖片，即backgroundurlquotquot例如如下代碼塊ltdiv style=quotbackgroundurl#39loadinggif#39 norepeatwidth100pxheight50pxquot添加文字添加文字添加文字ltdiv 二將img塊與文字塊文字塊采用span標簽顯示放在同一個div 中，然后設(shè)置他們之間的位置。