Merge branch 'seasoft-810' into seasoft-783-install

seasoftjapan · Jan 4, 2024 · b29a8cf · b29a8cf
2 parents 4bf4823 + 99563a8
commit b29a8cf
Showing 1 changed file with 64 additions and 32 deletions.
diff --git a/html/install/templates/install_frame.tpl b/html/install/templates/install_frame.tpl
@@ -26,61 +26,39 @@
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <link rel="stylesheet" href="css/admin_contents.css" type="text/css" media="all" />
-<link rel="stylesheet" href="../js/jquery.colorbox/colorbox.css" type="text/css" media="all" />
 <!--[if lt IE 9]>
 <script src="../js/jquery-1.11.1.min.js"></script>
 <![endif]-->
 <!--[if gte IE 9]><!-->
 <script src="../js/jquery-2.1.1.min.js"></script>
 <!--<![endif]-->
 <script type="text/javascript" src="../js/eccube.js"></script>
-<script type="text/javascript" src="../js/jquery.colorbox/jquery.colorbox-min.js"></script>
 
-<style type="text/css">
-#loading{
-  width: 100%;
-  height: 100%;
-  background-color:#FFFFFF;
-  filter:alpha(opacity=85);
-  -moz-opacity:0.85;
-  -khtml-opacity: 0.85;
-  opacity:0.85;
-  position: fixed;
-  _position: absolute; /* forIE6 */
-  display: none;
-  top: 0;
-  left: 0;
-  z-index: 10000;
-}
-#loading img {
-  width: 48px;
-  height: 48px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -24px;
-  margin-left: -24px;
-}
-</style>
 <!--{if $tpl_mainpage != 'complete.tpl'}-->
 <script type="text/javascript">//<![CDATA[
 $(function(){
     $('.btn.next').on('click', function(e) {
-      e.preventDefault();
-      $('form').submit();
-      $('#loading').show();
+        e.preventDefault();
+        $('form').submit();
     });
 });
+$(window).on('load', function() {
+    $('#loading').hide();
+});
+$(window).on('beforeunload',function(){
+    // unload では処理されないため、beforeunload を利用している。(Chrome, Firefox で確認)
+    $('#loading').show();
+});
 //]]></script>
 <!--{/if}-->
 <title>EC-CUBEインストール</title>
 </head>
+<!--{strip}-->
 <body>
 <!--{$GLOBAL_ERR}-->
 <noscript>
     <p>JavaScript を有効にしてご利用下さい。</p>
 </noscript>
-<div id="loading"><img src="../js/jquery.colorbox/loading.gif" width="48" height="48" alt="Loading..." /></div>
 <div id="outside">
     <div id="out-wrap">
         <div class="logo">
@@ -98,5 +76,59 @@ $(function(){
         <!--{/if}-->
     </div>
 </div>
+<div id="loading"><div class="inner">
+    <canvas></canvas>
+    <p>Loading...</p>
+</div></div>
 </body>
+<style type="text/css">
+#loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(32, 32, 32, 0.3);
+    .inner {
+        position: relative;
+        display: inline-block;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 1ex;
+        border-radius: 1ex;
+        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+        canvas {
+            --s: 14px;
+            --g: 5px;
+            width: calc(3*(1.353*var(--s) + var(--g)));
+            aspect-ratio: 3;
+            background:
+                linear-gradient(#FC0 0 0) left/33% 100% no-repeat,
+                conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)), #EEE 135deg,#383B4A 0 270deg,#9C9DA5 0)
+            ;
+            background-blend-mode: multiply;
+            mask:
+                linear-gradient(to bottom right, #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
+                conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0)
+            ;
+            background-size: calc(100%/3) 100%;
+            mask-size: calc(100%/3) 100%;
+            mask-composite: intersect;
+            animation: l7 steps(3) 1.5s infinite;
+            position: relative;
+            left: 50%;
+            transform: translate(-50%, 0);
+        }
+    }
+    p {
+        color: #fff;
+        letter-spacing: 0.3ex;
+    }
+}
+@keyframes l7 {
+    to {background-position: 150% 0%}
+}
+</style>
+<!--{/strip}-->
 </html>