diff --git a/index.css b/index.css
index fe2b58c..ec8fc7a 100644
--- a/index.css
+++ b/index.css
@@ -34,6 +34,11 @@ ul {
 #loading span {
   display: block;
 }
+#loading button {
+  font-size: 0.5em;
+  margin: 2em 0.5em 0;
+  padding: .5em 1em;
+}
 
 #header > *,
 #footer > *,
diff --git a/index.js b/index.js
index 8c0eab4..21267a1 100644
--- a/index.js
+++ b/index.js
@@ -117,6 +117,9 @@ function save(opt) {
     case 'all': {
       var tab = Object.keys(glyphs)
       const dload = document.getElementById('loading')
+      dload.querySelector('span').innerHTML = '<i>It may take sometimes...</i><br/><button>download '+tab.length+' svg file...</button><button class="cancel">cancel</button>';
+      dload.querySelector('button').addEventListener('click', saveAll)
+      dload.querySelector('button.cancel').addEventListener('click', function() { dload.close(); });
       dload.showModal();
       function saveAll() {
         var g = tab.pop();
@@ -133,14 +136,13 @@ function save(opt) {
               rep = rep.replace(/fill:#([^;|\"]*)/g, 'fill:' + $('#icon i').css('color'));
               var blob = new Blob([rep], {type: "text/plain;charset=utf-8"});
               saveAs(blob, glyph.name + '.svg');
-              saveAll()
+              setTimeout(saveAll, 300);
             }
           })
         } else {
           dload.close()
         }
       }
-      saveAll();
       break;
     }
     case 'svg': {