最近特别喜欢bootstrap，不仅仅因为他的简洁和漂亮，更因为他的可扩展和自定义组合效果让我着迷。 今天正好在研究iframe loading，发现bootstrap process bar的样式非常适合做loading载入的样式。 先看看演示效果：点此查看 现在来讲讲过程，其实很简单。首
最近特别喜欢bootstrap，不仅仅因为他的简洁和漂亮，更因为他的可扩展和自定义组合效果让我着迷。
今天正好在研究iframe loading，发现bootstrap process bar的样式非常适合做loading载入的样式。
先看看演示效果：点此查看
现在来讲讲过程，其实很简单。首先先定义html结构
home category php demo

loading-frame为loading所在整个区域，将用于覆盖在iframe之上，形成遮罩效果。
layout-left为左侧导航用于点击将内容显示在iframe内中。
layout-right用于存放iframe容器。
并且这几个div用绝对定位比较合适。
所以我们定义如下样式：
#layout-left, #layout-right,#loading-frame,#loading-wrap {position: absolute;}#layout-left{left: 0;width: 190px;z-index: 9;background-color: #ecf7fe;}#layout-left a {font-size: 12px; font-family: 微软雅黑}#layout-right, #loading-frame {left: 197px;right: 0;z-index: 10; background: #fff}#loading-frame {background: #000; z-index: 11;}#loading-wrap {width: 300px; left: 50%; top:40%; margin-left: -150px;}
定义样式要注意到 #loading-frame比#loading-wrap的z-index要高。
接下来就是制作loading动画效果：
var layout_left_width=190;window.onresize = function() { var widths = document.body.scrollwidth-layout_left_width; var heights = document.documentelement.clientheight-38; $(#content, #loading-frame).height(heights+25).width(widths-10); var heights = document.documentelement.clientheight-38; $(#layout-left).height(heights+25);}window.onresize();//上面此段用于保存各个区域的宽高能100%，也保证loading-frame和content的区域一样宽高。//设置透明度遮罩层，该层大小和iframe一样，用于遮在iframe上，并隐藏掉。$(#loading-frame).css('opacity', .8).hide();var interval = 0;//当用户点击左侧导航上的链接的时候开始出现loading效果function loading_start() { if (interval) { clearinterval(interval); } $(#loading-frame .bar).css('width', 0); $(#loading-frame).show(); var percent = 0; interval = setinterval(function(){ percent += 10; if (percent == 100) { percent = 99; } if (percent 效果图如下：
原文地址：bootstrap process bar 制作 iframe loading效果, 感谢原作者分享。