1图片准备GIF静态长图，保存至文件夹2工具使用Dreamweaver进行操作五项目实现1创建div容器，加入class属性2CSS设置定义div的宽高位置背景色加载图片，设定宽高，实现动画效果使用CSS3 animation中的steps属性，表示动画在45个关键帧之间切换，与45帧相匹配，动画时。

HTML中插入gif格式的图片有几种简单的方法可以实现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！页面内容在这里加载 ltdiv ltbody lthtml。

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

可以用html5实现，也可以做成gif的图片，你只需要设置为和你程序设置一样的时间然后进度条自动结束就好了用图片是最好实现，用ps软件就可以制作这个的实现，有很多中方法，简单的，是使用 DIV 嵌套，例如ltdiv style=quotwidth 100px height 10px border solid 1px #ccctextalign leftquot。

一image 作为背景图片，即backgroundurlquotquot例如如下代码块ltdiv style=quotbackgroundurl#39loadinggif#39 norepeatwidth100pxheight50pxquot添加文字添加文字添加文字ltdiv 二将img块与文字块文字块采用span标签显示放在同一个div 中，然后设置他们之间的位置。