Framework7进度栏

📌 相关文章

📜 Framework7进度栏

📅 最后修改于: 2021-01-02 05:49:48 🧑 作者: Mango

在Framework7中，进度条用于向用户显示资产的加载或任务的进度。

“ progressbar”类用于指定进度条。当您要指定用户不知道该请求的加载过程将持续多长时间时，将使用“ progressbar-infinite”类。

Progressbar JavaScript API

进度条与JavaScript API结合使用，可通过以下方法指定显示，隐藏和进度属性：

myApp.setProgressbar(容器，进度，速度)：

参数说明：

container：这是一个字符串或HTML元素，用于定义进度条元素的容器。

progress：以整数格式表示，并定义任务的进度。

速度：以整数格式表示，并指定任务进度的持续时间。

myApp.hideProgressbar(包含)：

参数说明：

container：这是一个字符串或HTML元素，用于定义进度条元素的容器。

myApp.showProgressbar(内容，进度，颜色)：

参数说明：

container：这是一个字符串或HTML元素，用于定义进度条元素的容器。

progress：以整数格式表示，并定义任务的进度。

速度：以整数格式表示，并指定任务进度的持续时间。

例

让我们以一个示例来显示动画的确定和不确定进度条，以指示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:
                           Displays the infinite progress bar in multiple colors on top:

                           
                           Start Loading
                        
                                         
                     Different types of colored progress bars: