I recently liked Bootstrap not only because of its simplicity and beauty, but also because of its scalability and custom combination effects. Today, I am studying iframeloading and find that the bootstrapprocessbar style is very suitable for loading styles. Let's take a look at the demo: click here to view the process, which is actually very simple. First
I recently liked Bootstrap not only because of its simplicity and beauty, but also because of its scalability and custom combination effects. Today, I am studying iframe loading and find that the bootstrap process bar style is very suitable for loading styles. Let's take a look at the demo: click here to view the process, which is actually very simple. First
I recently liked Bootstrap not only because of its simplicity and beauty, but also because of its scalability and custom combination effects.
Today, I am studying iframe loading and find that the bootstrap process bar style is very suitable for loading styles.
First look at the demo effect: click here to view
Now let's talk about the process, which is actually very simple. First, define the HTML Structure
Loading-Frame is the entire region where Loading is located and will be used to overwrite IFrame to form a mask effect.
Layout-left is the left navigation bar used to click and display the content in iframe.
Layout-right is used to store the iframe container.
And these divs are more suitable for absolute positioning.
Therefore, we define the following styles:
# Layout-left, # layout-right, # loading-frame, # loading-wrap {position: absolute ;}# layout-left {left: 0; width: margin PX; 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 ;}
When defining a style, note that # loading-frame is higher than # loading-wrap's z-index.
Next we will make the loading animation effect:
Var layout_left_width = 190; window. onresize = function () {var widths = document. body. scrollWidth-layout_left_width; var heights = document.doc umentElement. clientHeight-38; $ ("# content, # loading-frame "). height (heights + 25 ). width (widths-10); var heights = document.doc umentElement. clientHeight-38; $ ("# layout-left "). height (heights + 25);} window. onresize (); // the above section is used to save the high-energy-wide 100% of each region, and ensure that the loading-frame and content region 1 Sample width and height. // Sets the transparency mask layer, which is the same size as IFrame and used to mask IFrame and hide it. $ ("# Loading-frame" mirror.css ('opacity ',. 8 ). hide (); var interval = 0; // The loading effect function loading_start () {if (interval) starts when you click the link in the left-side navigation bar) {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 <100) {$ ("# loading-frame. bar "). animate ({'width': Percent + '%'}, 'slow') ;}, 300) ;}// when iframe has been fully loaded, hide loading-framefunction loading_complete () {$ ("# loading-frame. bar "). animate ({'width': '000000'}, 'save'); clearInterval (interval); setTimeout (function () {$ ("# loading-frame "). fadeOut ("slow") ;}, 200)} binds an event to the link on the left. $ ("# Left-nav "). bind ('click', function () {$ ("# content "). attr ('src', $ (this ). attr ("href"); loading_start (); var iframe = document. getElementById ("content"); if (iframe. attachEvent) {iframe. attachEvent ("onload", function () {loading_complete () ;});} else {iframe. onload = function () {loading_complete () ;}}return false ;});
As follows:
Original article address: the iframe loading effect created by Bootstrap process bar. Thank you for sharing it with the original author.