📌  相关文章
📜  Framework7-进度栏

📅  最后修改于: 2020-10-25 02:50:25             🧑  作者: Mango

描述

进度条可用于向用户显示资产的负载或任务的进度。您可以使用progressbar类指定进度条。如果用户不知道请求的加载过程将持续多长时间，则可以使用progressbar-infinite类。

进度条JavaScript API

进度条可以与JavaScript API一起使用，以通过以下方法指定show ， hide和progress属性-

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.

例

以下示例显示确定的和不确定的进度条动画，以指示Framework7中的活动-


      
      
      Progress Bar
      
      
      
      
   

   
      

         

            

               

               
                  

                     

                        
Progress Bar

                     

                  

                     
Determinate Progress Bar

                     

                        

                           
Inline determinate progress bar:

                           
                           

                              

                              
                              

                                 25%
                                 50%
                                 75%
                                 100%
                              

                           

                           
                           
Loads and hides the determinate progress bar:

                           

                              
Start Loading

                           

                           
                           
Displays the determinate progress bar on top:

                           
Start Loading

                        

                     

                     
                     
Infinite Progress Bar

                     

                        

                           
Inline infinite progress bar:

                           
                           

                           
                           
Displays the infinite progress bar in multiple colors:

                           
                           

                           
                           
Displays the infinite progress bar on top:

                           
                           
Start Loading

                           
                           
Displays the infinite progress bar in multiple colors on top:

                           
                           
Start Loading

                        

                     

                     
                     
Different types of colored progress bars:

                     

                        
    
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    • 
                           
                           
  • 
                              
    
                                 
    
                              
    
                           
    •

输出

让我们执行以下步骤，看看上面给出的代码如何工作-

  • 将上述指定的HTML代码另存为服务器根文件夹中的progress_bar.html文件。

  • 以http：//localhost/progress_bar.html格式打开此HTML文件，并显示输出，如下所示。

  • 该示例显示进度条，该进度条指示完成操作将花费多长时间，并显示不同类型的进度条以指示活动。