1. First you need to download the progress bar plug-in. The URL is as follows http://www.jq22.com/jquery-info436

2. Copy the JS and CSS files in the extracted folder to the corresponding CSS and JS files in the project.

3. Introducing js and css

	<link rel="stylesheet" href="css/jquery.circliful.css"/>
    <script type="text/javascript" src="js/jquery.circliful.min.js"></script>

4. Style progress bar

#Mask {
     position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #333;
     z-index: 1002; left: 0px;
     opacity:0.5; -moz-opacity:0.5;
}
#Progress{
    position: absolute; top: 36%;left:43%;z-index: 2000;color:#6633CC;
}
#Progress .circle-info{
    color:#6633CC;
}

5, Preparation of front desk div

	<!-- Mask It's a mask. Progress Progress bar -->
      <div>
      <div id="Mask"></div>
      <div id="Progress" data-dimension="200" data-text="0%" data-info="Export progress" data-width="15" data-fontsize="30" data-percent="0" data-fgcolor="#22eeee" data-bgcolor="#6633CC"></div>
      </div>

6, Write the show and hide function of progress bar

//Show progress bar
				    var isFirstExport=true;
				    function showProgress(){
				        $("#Mask").css("height",$(document).height());
				        $("#Mask").css("width",$(document).width());
				        $("#Mask").show();
				        if(isFirstExport){
				            $("#Progress").circliful();
				        }else{
				            $("#Progress .circle-text").text("0%");
				            $("#Progress. Circle info "). Text (" export progress ");
				            $("#Progress").show();
				        }
				    }  
				    //Hide progress bar
				    function hideProgress(){
				        $("#Mask").hide();
				        $("#Progress").hide();
				    }          

7. Write the current progress in the exported place and store it in the session

public void exportCSV(HttpServletRequest request,String rootPath, String title, String[] headers,
			List<LinkedHashMap<String, Object>> dataset, OutputStream out) {
		try {
			System.out.println(rootPath);
			CsvWriter csvWriter = new CsvWriter(rootPath,',', Charset.forName("UTF-8"));
			//Write header information
			csvWriter.writeRecord(headers);
		    //Write content information
			for(int k=0;k<dataset.size();k++){
				curcount++;
				LinkedHashMap<String, Object> infos=dataset.get(k);
				String agent_id=infos.get("agent_id").toString();
				String extension=infos.get("extension").toString();
				String starttime=infos.get("starttime").toString();
				String endtime=infos.get("endtime").toString();
				String info=infos.get("info").toString();	
				csvWriter.write(agent_id);
				csvWriter.write(extension);
				csvWriter.write(starttime);
				csvWriter.write(endtime);
				csvWriter.write(info);
				csvWriter.endRecord();
				
				//Exported progress bar information
				 double dPercent=(double)curcount/totalCount;   //Convert the calculated number to double
		         int  percent=(int)(dPercent*100);               //Multiply by 100
		         request.getSession().setAttribute("curCount", curcount);
		         request.getSession().setAttribute("percent", percent);    //For example, here is 50
		         request.getSession().setAttribute("percentText",percent+"%");//Here is 50%.	
			}

8. Write a method in the Controller to refresh the progress bar in real time

/**
     * Refresh the progress bar, and take the data from the session
     */ 
	    @ResponseBody
	    @RequestMapping(value = "/flushProgress.html")
	    public String flushProgress3(HttpServletRequest request) throws Exception
	    {
	        HashMap<String,Object> map=null;
	        try {
	            HttpSession session = request.getSession();
	            map=new HashMap<String, Object>();
	            map.put("totalCount",request.getSession().getAttribute("totalCount"));  //Total number
	            map.put("curCount", request.getSession().getAttribute("curCount"));      //Number of leading bars
	            map.put("percent", request.getSession().getAttribute("percent"));          //Percentage number
	            map.put("percentText", request.getSession().getAttribute("percentText"));
	            //Percentage text
	           /// System.out.println(map.toString());
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
	        return JSON.toJSONString(map);
	    } 

9. The foreground calls the progress bar interface and sets the real-time refresh

 var data = {
				'fromTime':starttime,
				'toTime':endtime,
						     }
							 //Write data
		$.ajax( {
				  type : "GET",
				  url: "${pageContext.request.contextPath}/Datecount.html",
				  data:data,
				  dataType: "json",
				  contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				   success : function(msg) {
				          if(msg>150000){
				          alert('More than 200000 pieces of data, please shorten the start time interval !');		
				                 	  }
                          else if(msg>0){
				        // $('#loadding').removeClass('hidden');
	                      var url="${pageContext.request.contextPath}/excelData.html?fromTime="+encodeURI(starttime)+"&toTime="+encodeURI(endtime);
							       window.location.href=url; 
						 /*** Display of progress bar  */  
						 showProgress();
					  window.setTimeout(function(){
					    var timer=window.setInterval(function(){
						 $.ajax({
							 type:'post',
							 dataType:'json', 
							 url:"${pageContext.request.contextPath}/flushProgress.html",		 
                             success: function(data) {								            							          
									$("#Progress .circle-text").text(data.percentText);
			if(data.index===undefined||data.totalCount===undefined){						                    
			  $("#Progress. Circle info "). Text (" export progress ");
			  //hideProgress();
						 }
            else{ 
            $("#Progress. Circle info "). Text (" export progress: "+ data.index+"/"+data.totalCount);						            
				  }
				if(data.percent=="100"){
				window.clearInterval(timer);
				  hideProgress();	  }
									},
			 error:function(data){ 
					hideProgress();
								   }
									 });
										 },800);
										   },800);
										 isFirstExport=false;   
				                 	  }
				                 	  else{
				                 	    alert("Data information for this time period has not been synchronized");  
				                 	  } 
				                 },
								 error:function(){
								  hideProgress();
								 }
				             });
				   		}

This progress bar has been completed successfully