zheng/blog-backEnd
1
0
Fork 0
Code Issues 5 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

feat: 安装页面布局 loading动画

Browse Source
This commit is contained in:
禾几海
2020-10-22 15:41:34 +08:00
parent b920034ad6
commit 49ff1865bb
3 changed files with 290 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/main/resources/public/css/install.css
View File

@@ -9,8 +9,8 @@ html, body {
}
.box {
width: 40vw;
height: 50vh;
width: 600px;
height: 45vh;
padding: 8px 10px;
border: 1px solid rgba(50, 50, 50, .1);
border-radius: 3px;
@@ -23,16 +23,27 @@ html, body {
.box-inner {
height: 100%;
width: 100%;
background: #ececec;
overflow: hidden;
}
.box-inner select, input, button {
width: 90%;
margin: 8px 5%;
margin: 12px 5%;
height: 40px;
padding: 5px 10px;
border-radius: 3px;
border: 1px solid rgba(50, 50, 50, .1);
box-sizing: border-box;
}
input:focus {
border: 1px solid rgba(0, 50, 50, .6);
outline: none;
}
.box-inner h3 {
text-align: center;
margin-bottom: 20px;
}
.err-msg {
@@ -44,6 +55,56 @@ html, body {
font-weight: lighter;
}
.show-err-tip {
display: block;
}
#first-page, #second-page {
height: 100%;
margin: 10px 0;
}
.hidden {
height: 0 !important;
visibility: hidden;
position: absolute;
}
.show {
width: 100%;
position: relative;
height: 100%;
visibility: visible;
}
#next-step, .button-group {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
}
.button-group button {
width: 80px;
}
.button-group #install {
position: absolute;
bottom: 0;
right: 20px;
background: #1890ff;
color: white;
}
.loading-show {
z-index: 10000;
display: flex !important;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
}

171
src/main/resources/public/css/loading.css Normal file
View File

@@ -0,0 +1,171 @@
.pacman {
position: relative;
}
.loading {
box-sizing: border-box;
flex: 0 1 auto;
display: none;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
max-width: 100%;
/*height: 200px;*/
align-items: center;
justify-content: center;
background: #ececec;
}
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear;
}
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s 0.33s infinite linear;
animation: pacman-balls 1s 0.33s infinite linear;
}
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s 0.66s infinite linear;
animation: pacman-balls 1s 0.66s infinite linear;
}
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0.99s infinite linear;
animation: pacman-balls 1s 0.99s infinite linear;
}
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #ed5565;
border-left: 25px solid #ed5565;
border-bottom: 25px solid #ed5565;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
animation: rotate_pacman_half_up 0.5s 0s infinite;
}
.pacman > div:nth-child(2) {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #ed5565;
border-left: 25px solid #ed5565;
border-bottom: 25px solid #ed5565;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -50px;
}
.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
background-color: #ed5565;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
-ms-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 100px;
}
@-webkit-keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-webkit-keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}

62
src/main/resources/public/install.html
View File

@@ -4,12 +4,25 @@
<meta charset="UTF-8">
<title>博客安装页面</title>
<link rel="stylesheet" href="css/install.css">
<link rel="stylesheet" href="css/loading.css">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<div class="loading">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p style="margin-top: 20px;margin-left: 10px;">
加载中....
</p>
</div>
<div class="box">
<div class="box-inner">
<div id="first-page">
<div id="first-page" class="show">
<h3>数据库配置</h3>
<!-- 数据库-->
<select id="db-type">
@@ -22,15 +35,18 @@
<span class="err-msg" id="err-tip-db-username">数据库用户名不可为空</span>
<input id="db-password" type="password" placeholder="请输入数据库密码">
<span class="err-msg" id="err-tip-db-password">数据库密码不可为空</span>
<button onclick="nextPage()">下一步</button>
<button onclick="nextPage()" id="next-step">下一步</button>
</div>
<div id="second-page">
<div id="second-page" class="hidden">
<h3>新建管理员用户</h3>
<input id="email" type="email" placeholder="请输入用户名">
<span class="err-msg" id="err-tip-email">用户名不可为空</span>
<input id="password" type="password" placeholder="请输入密码">
<span class="err-msg" id="err-tip-password">密码不可为空</span>
<button onclick="postInstallEvent()">安装</button>
<div class="button-group">
<button onclick="preStep()" id="pre-step">上一步</button>
<button onclick="postInstallEvent()" id="install"> 安装</button>
</div>
</div>
</div>
</div>
@@ -43,9 +59,10 @@
requestData.password = $('#password').val()
$('#err-tip-email').removeClass("show-err-tip");
$('#err-tip-password').removeClass("show-err-tip");
!requestData.email && checkInput($('#email'), $('#err-tip-email'))
!requestData.password && checkInput($('#password'), $('#err-tip-password'))
!requestData.email && checkInput($('#email'), $('#err-tip-email'))
if (!requestData.email || !requestData.password) return;
$('.loading').addClass('loading-show');
$.ajax('/install', {
method: "POST",
contentType: 'application/json',
@@ -55,7 +72,7 @@
success: function (data) {
console.log("data", data);
console.log("requestData", requestData);
interValId = setInterval(checkConnection, 200)
interValId = setInterval(checkConnection, 500)
checkConnection();
}
})
@@ -69,7 +86,10 @@
if (data.result.is_install) {
console.log("安装成功");
window.location.href = '/';
} else {
console.log("安装失败");
}
$('.loading').removeClass('loading-show');
clearInterval(interValId);
},
error: function (err) {
@@ -78,6 +98,9 @@
})
}
/**
* 切换下一页
*/
function nextPage() {
requestData = {
dbPassword: $('#db-password').val(),
@@ -91,12 +114,33 @@
$('#err-tip-db-url').removeClass("show-err-tip");
$('#err-tip-db-username').removeClass("show-err-tip");
$('#err-tip-db-password').removeClass("show-err-tip");
!requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type'))
!requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url'))
!requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username'))
!requestData.dbPassword && checkInput($('#db-password'), $('#err-tip-db-password'))
!requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username'))
!requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url'))
!requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type'))
if (!requestData.dbType || !requestData.dbUrl || !requestData.dbUsername || !requestData.dbPassword) return
$('#first-page').addClass('hidden');
$('#first-page').removeClass('show');
$('#second-page').addClass('show');
$('#second-page').removeClass('hidden');
}
function preStep() {
$('#second-page').addClass('hidden');
$('#second-page').removeClass('show');
$('#first-page').addClass('show');
$('#first-page').removeClass('hidden');
$('#err-tip-email').removeClass("show-err-tip");
$('#err-tip-password').removeClass("show-err-tip");
}
/**
* 检查组件的状态
* @param component 输入框
* @param errTipComponent 错误信息提示框
* @returns {boolean} 是否有错误
*/
function checkInput(component, errTipComponent) {
if (!component.val()) {
errTipComponent.addClass("show-err-tip");