Semantic UI 之 进度条 progress

第一步：创建项目

添加JQuery和Semantic UI包、创建progress.html页面：

第二步：progress.html页面

    
        
        进度条
        
        
        
    
    
        
            
                
            
            
                
                上传文件
            

            
                
            

            
                
            
            
                //通过JavaScript设置进度值
                $("#fileUpload1").progress({
                    percent: 70
                });
            

            
                
                     
                
                文件上传
            
        
        
            $("#fileUpload2").progress({
                total: 3, //任务总数
                text: { //标签
                    active: '共 {total} 个文件，已经上传 {value} 个',
                    success: '成功上传 {total} 个文件'
                }
            })
        
    

效果

在浏览器控制台中，分别执行下面代码，可以看到进度条的变化：