Teochew Thunder: Web Tutorial: The Wayang Progress Bar (Part 2/4)

Now that we have your Wayang Progress Bar, here's the next step: how to present it, and how to turn it off.

Firstly, we're going to add some filler content to the existing page, so that you can get a nice visual of what the final result looks like.

Add this markup code to your page.

   <body>
       <div id="loader" class="loader_box">
           <div id="loader_content" class="loader_content" style="margin-left:-500px;">

           </div>
       </div>

        <script>
            start_loader("loader");
        </script>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   </body>

The result:

Next, what we're going to do may be a little tricky for a CSS beginner. We're going to place a layer over the entire screen, and plonk your Wayang Progress Bar right in the middle.

Make these amendments to your CSS and HTML.

<!DOCTYPE html>
<html>
   <head>
       <title>Progress Loader test</title>
        <style type="text/css">
            .loader_box
            {
                width: 500px;
                height: 20px;
                border: 1px solid #777777;
                border-radius: 9px;
                overflow: hidden;
margin-left: auto;
margin-right: auto;
            }

            .loader_content
            {
                width: 500px;
                height: 20px;
                background: #ff4444; /* Old browsers */
                background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
                background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */

            }

            .loader_wrapper
            {
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                position: fixed;
                z-index: 600;
                top: 0px;
                left: 0px;
padding-top: 50px;
            }

        </style>

        <script>
            var loader;

            function start_loader(varloader)
            {
                loader=setInterval(function () {process_loader(varloader+"_content")}, 500);

                function process_loader(varloadercontent)
                {
                    var inc=1;
                    var marginleft = document.getElementById(varloadercontent).style.marginLeft;
                    marginleft=marginleft.replace("px","");
                    marginleft=parseInt(marginleft)+inc;

                    if (marginleft>=0)
                    {
                        document.getElementById(varloadercontent).style.marginLeft="-5px";
                    }
                    else
                    {
                        document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
                    }
                }
            }
        </script>
   </head>

   <body>
       <div id="loader_wrapper" class="loader_wrapper">
            <div id="loader" class="loader_box">
                <div id="loader_content" class="loader_content" style="margin-left:-500px;">

                </div>
            </div>
        </div>

        <script>
            start_loader("loader");
        </script>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

   </body>
</html>

The result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
What we've done is to determine where your Wayang Progress Bar sits when visible. And now we're going to turn it invisible, which will be the default state.

Add the following code to your CSS.

            .loader_wrapper
            {
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                position: fixed;
                z-index: 600;
                top: 0px;
                left: 0px;
padding-top: 50px;
display: none;
            }

And viola! All that's left is your Lorem Ipsum filler content. Now we're going to include code to turn your Wayang Progress Bar visible when the page loads, and then turn it invisible again when the page is done loading.

Modify your JavaScript and HTML as shown below:

<!DOCTYPE html>
<html>
   <head>
       <title>Progress Loader test</title>
        <style type="text/css">
            .loader_box
            {
                width: 500px;
                height: 20px;
                border: 1px solid #777777;
                border-radius: 9px;
                overflow: hidden;
margin-left: auto;
margin-right: auto;
            }

            .loader_content
            {
                width: 500px;
                height: 20px;
                background: #ff4444; /* Old browsers */
                background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
                background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
            }

            .loader_wrapper
            {
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                position: fixed;
                z-index: 600;
                top: 0px;
                left: 0px;
padding-top: 50px;
display: none;
            }
        </style>

        <script>
            var loader;

            function start_loader(varloader)
            {
                document.getElementById(varloader+"_wrapper").style.dislay="block";
                loader=setInterval(function () {process_loader(varloader+"_content")}, 500);

                function process_loader(varloadercontent)
                {
                    var inc=1;
                    var marginleft = document.getElementById(varloadercontent).style.marginLeft;
                    marginleft=marginleft.replace("px","");
                    marginleft=parseInt(marginleft)+inc;

                    if (marginleft>=0)
                    {
                        document.getElementById(varloadercontent).style.marginLeft="-5px";
                    }
                    else
                    {
                        document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
                    }
                }
            }

            function stop_loader(varloader)
            {
                 clearInterval(loader);
                 document.getElementById(varloader+"_wrapper").style.dislay="none";
            }
        </script>
   </head>

   <body>
       <div id="loader_wrapper" class="loader_wrapper">
            <div id="loader" class="loader_box">
                <div id="loader_content" class="loader_content" style="margin-left:-500px;">

                </div>
            </div>
        </div>

        <script>
            start_loader("loader");
        </script>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <script>
            stop_loader("loader");
        </script>
   </body>
</html>

And you're done! Sit back and watch the show.

Not displaying?

I thought that might happen. The start_loader() function takes effect after 500 milliseconds. But if your page is done loading within 500 milliseconds, the stop_loader() function kills it! So all you're going to see (if you're lucky) is a flash of black. In order to actually see your code working, you need to replace the filler content with something more substantial, like an entire gallery of images.

In any case, this is more like what you should be seeing.

Next...

Adding more visual input to your Wayang Progress Bar. The code can be used and is fully functional. But we're not done yet, sunshine! If you're gonna wayang, be professional about it! We're going to value-add!

Teochew Thunder

Pages

Wednesday 12 November 2014

Web Tutorial: The Wayang Progress Bar (Part 2/4)

Not displaying?

Next...

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews