Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

インストール画面のローディング画像が欠落している #810 #812

Closed
wants to merge 2 commits into from
Closed

インストール画面のローディング画像が欠落している #810 #812

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e90552a
インストール画面のローディング画像が欠落している #810
seasoftjapan Jan 3, 2024
99563a8
幾らか容量が増えたと思うので strip
seasoftjapan Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 80 additions & 48 deletions html/install/templates/install_frame.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,78 +26,110 @@
<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>
<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">
<img src="img/logo_resize.jpg" width="99" height="15" alt="EC-CUBE" />
<div id="out-wrap">
<div class="logo">
<img src="img/logo_resize.jpg" width="99" height="15" alt="EC-CUBE" />
</div>
<div id="out-area">
<div class="out-top"></div>
<!--{include file=$tpl_mainpage}-->
</div>
<!--{if strlen($install_info_url) != 0}-->
<div id="info-area">
<iframe src="<!--{$install_info_url}-->" width="562" height="550" frameborder="no" scrolling="no">
こちらはEC-CUBEからのお知らせです。この部分は iframe対応ブラウザでご覧下さい。
</iframe>
</div>
<!--{/if}-->
</div>
<div id="out-area">
<div class="out-top"></div>
<!--{include file=$tpl_mainpage}-->
</div>
<!--{if strlen($install_info_url) != 0}-->
<div id="info-area">
<iframe src="<!--{$install_info_url}-->" width="562" height="550" frameborder="no" scrolling="no">
こちらはEC-CUBEからのお知らせです。この部分は iframe対応ブラウザでご覧下さい。
</iframe>
</div>
<!--{/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>
Loading