<%= t('custom_gallery.progressbar')+':' %>
<div style='width:100%;'>
  <div class="progress">
    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
  </div>
  <div class="message" style='width:100%;text-align:center;'></div>
</div>
<SCRIPT LANGUAGE=javascript> 
function get_data(){
    var finish=false;
    $.ajax({
        url : "/admin/custom_galleries/recreate_image/recreate_progress",
        dataType : "json",
        type : "post",
        success:function(data){
            $(".progress-bar").text(data.percent)
            $(".message").text(data.filename)
            finish = data.finish
            if (finish){
                $.get('/admin/custom_galleries/recreate_image/finish_recreate')
                clearInterval(id)
                document.location.href = '/admin/custom_galleries'
                console.log('finish!')
            }
            $(".progress-bar").css('width',data.percent)
        },
        error:function(XMLHttpRequest, textStatus){
            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
            console.log(textStatus);
            $(".progress-bar").text("<%= t('custom_gallery.error') %>");
            console.log('error')
            $.get('/admin/custom_galleries/recreate_image/finish_recreate')
            $(".progress-bar").css('width','100%')
            clearInterval(id)
        }
        })
}
var id = setInterval(get_data,200)
</SCRIPT>