appscms-imagekit.html in appscms-tools-theme-4.5.1

- old
+ new

@@ -29,24 +29,23 @@
                     </select>
                   </div>
                 </div>
               </div>
               <div class="col-5">
+             
+
+
+             
                 <div class="d-flex align-items-center">
-                  <button
-                    id="download-button"
-                    style="background: var(--primary-color)"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <path
-                        d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z"
-                      /></svg
-                    >Download
+                  <button id="download-button" style="background: var(--primary-color)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                      <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z"/>
+                    </svg>
+                    <span class="button-loader"></span>
+                    Download
                   </button>
+                  
                 </div>
               </div>
             </div>
           </div>
         </div>
@@ -55,46 +54,30 @@
       <div class="row">
         {%- if page.optionPanel == false -%}
         <div class="col-md-12 mx-auto mb-2">
           <div class="select-img-panel">
             <div id="saving-data" style="display: none">
-              <img
-                loading="lazy"
-                src="/assets/images/loader.gif"
-                alt="saving"
-                {%-
-                if
-                site.crossorigin
-                -%}
-                crossorigin
-                {%-
-                endif
-                -%}
-              />
-              <span class="ml-2">Saving your images...</span>
+              
+<div class="appscms-loader d-flex">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>
+
+              <div class="text-center mt-4">Saving your files...</div>
             </div>
             <div id="canvas-box-panel"></div>
           </div>
           {{content}}
         </div>
         {%- else -%}
         <div class="col-md-7 mx-auto mb-2">
           <div class="select-img-panel">
             <div id="saving-data" style="display: none">
-              <img
-                loading="lazy"
-                src="/assets/images/loader.gif"
-                alt="saving"
-                {%-
-                if
-                site.crossorigin
-                -%}
-                crossorigin
-                {%-
-                endif
-                -%}
-              />
-              <span class="ml-2">Saving your images...</span>
+              
+<div class="appscms-loader d-flex">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>
+
+              <div class="mt-4 text-center">Saving your files...</div>
             </div>
             <div id="canvas-box-panel"></div>
           </div>
         </div>
         <div class="col-md-5">