Framework7 - Progress Bar-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Progress Bar

Description

The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When the user does not know how long the loading process will be there for the request, you can use progressbar-infinite class.

Progress Bar JavaScript API

The progress bar can be used along with the JavaScript API to specify show, hide and progress properties by using the following methods −

S.No	Methods	Description & Parameters
1	myApp.setProgressbar (container , progress, speed)	It sets the progress bar for the progress of a task. container − It is a string or HTML element that defines the container of progress bar element. progress − It represents in integer format and defines the progress of a task. speed − It represents in integer format and specifies the duration of the progress of a task.
2	myApp.hideProgressbar (contain er)	It hides the progress bar. container − It is a string or HTML element that defines the container of progress bar element.
3	myApp.showProgressbar (contai ner, progress, color)	It displays the progress bar. container − It is a string or HTML element that defines the container of progress bar element. progress − It represents in integer format and defines the progress of a task. speed − It represents in integer format and specifies the duration of the progress of a task.

S.No

Methods

Description & Parameters

myApp.setProgressbar (container , progress, speed)

It sets the progress bar for the progress of a task.

container − It is a string or HTML element that defines the container of progress bar element.

progress − It represents in integer format and defines the progress of a task.

speed − It represents in integer format and specifies the duration of the progress of a task.

myApp.hideProgressbar (contain er)

It hides the progress bar.

container − It is a string or HTML element that defines the container of progress bar element.

myApp.showProgressbar (contai ner, progress, color)

It displays the progress bar.

container − It is a string or HTML element that defines the container of progress bar element.

progress − It represents in integer format and defines the progress of a task.

speed − It represents in integer format and specifies the duration of the progress of a task.

Example

The following example displays an animated determinate and indeterminate progress bars to indicate activity in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Progress Bar</title>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.material.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            <span class = "pages">
               <span data-page = "home" class = "page navbar-fixed">
               
                  <span class = "navbar">
                     <span class = "navbar-inner">
                        <span class = "center">Progress Bar</span>
                     </span>
                  </span&gt
                  
                  <span class = "page-content">
                     <span class = "content-block-title">Determinate Progress Bar</span>
                     <span class = "content-block">
                        <span class = "content-block-inner">
                           <p>Inpne determinate progress bar:</p>
                           
                           <span class = "progressbar-inpne">
                              <p><span data-progress = "10" class = "progressbar"></span></p>
                              
                              <p class = "buttons-row">
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>
                              </p>
                           </span>
                           
                           <p>Loads and hides the determinate progress bar:</p>
                           <span class = "progressbar-load-hide">
                              <p><a href = "#" class = "button button-raised">Start Loading</a></p>
                           </span>
                           
                           <p>Displays the determinate progress bar on top:</p>
                           <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Infinite Progress Bar</span>
                     <span class = "content-block">
                        <span class = "content-block-inner">
                           <p>Inpne infinite progress bar:</p>
                           
                           <p><span class = "progressbar-infinite"></span></p>
                           
                           <p>Displays the infinite progress bar in multiple colors:</p>
                           
                           <p><span class = "progressbar-infinite color-multi"></span></p>
                           
                           <p>Displays the infinite progress bar on top:</p>
                           
                           <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                           
                           <p>Displays the infinite progress bar in multiple colors on top:</p>
                           
                           <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Different types of colored progress bars:</span>
                     <span class = "pst-block">
                        <ul>
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "5" class = "progressbar color-red"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "10" class = "progressbar color-pink"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "20" class = "progressbar color-deeppurple"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "30" class = "progressbar color-blue"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "40" class = "progressbar color-cyan"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "50" class = "progressbar color-green"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "60" class = "progressbar color-pme"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "70" class = "progressbar color-amber"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "80" class = "progressbar color-deeporange"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "90" class = "progressbar color-gray"></span>
                              </span>
                           </p>
                           
                           <p class = "item-content">
                              <span class = "item-inner">
                                 <span data-progress = "100" class = "progressbar color-black"></span>
                              </span>
                           </p>
                        </ul>
                     </span>
                     
                  </span>
               </span>
            </span>
         </span>
      </span>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7({
            material: true
         });
         
         var $$ = Dom7;

         $$( .progressbar-inpne .button ).on( cpck , function () {
            var progress = $$(this).attr( data-progress );
            var progressbar = $$( .progressbar-inpne .progressbar );
            myApp.setProgressbar(progressbar, progress);
         });
         
         $$( .progressbar-load-hide .button ).on( cpck , function () {
            var container = $$( .progressbar-load-hide p:first-child );
            
            //it doesn t load if another progresbar is loading
            if (container.children( .progressbar ).length) return;

            myApp.showProgressbar(container, 0);

            var progress = 0;
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$( .progressbar-overlay .button ).on( cpck , function () {
            var container = $$( body );
            if (container.children( .progressbar, .progressbar-infinite ).length) return;
            myApp.showProgressbar(container, 0,  orange );
            var progress = 0;
            
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  //hides the progressbar
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$( .progressbar-infinite-overlay .button ).on( cpck , function () {
            var container = $$( body );
            if (container.children( .progressbar, .progressbar-infinite ).length) return;
            myApp.showProgressbar(container,  yellow );
            setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
         
         $$( .progressbar-infinite-multi-overlay .button ).on( cpck , function () {
            var container = $$( body );
            if (container.children( .progressbar, .progressbar-infinite ).length) return;
               myApp.showProgressbar(container,  multi );
               setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as progress_bar.html file in your server root folder.

Open this HTML file as http://localhost/progress_bar.html and the output is displayed as shown below.

The example displays the progress bar, which indicates how long an operation will take to complete the process and displays the different types of progress bars to indicate activity.