shangshang
/
hhqtest


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){
 $("#btnStartProgress").click(function(){
                    if ($(this).hasClass('weui_btn_disabled')) {
                        return;
                    }

                    $(this).addClass('weui_btn_disabled');

                    var progress = 0;
                    var $progress = $('.js_progress');

                    function next() {
                        $progress.css({width: progress + '%'});
                        progress = ++progress % 100;
                        setTimeout(next, 30);
                    }

                    next();                   
});
	  
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
            上传进度条
        </h1>
        <p class="page-hd-desc"></p>
    </div>
    
     <div class="page-bd-15">
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <br>
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 50%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <br>
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 80%;"></div>
            </div>
            <a href="javascript:;" class="weui_progress_opr">
                <i class="weui_icon_cancel"></i>
            </a>
        </div>
        <div class="weui_btn_area">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>
        </div>
    </div>      
    
</body>
</html>