pswqm3ot6
/
spring-boot-online-exam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交loading

Browse Source
wangyong 3 months ago
parent b71fe66e20
commit d18e17a68d
4 changed files with 312 additions and 23 deletions
Show Stats Download Patch File Download Diff File

133
frontend/public/index.html vendored
Unescape View File

@ -1,24 +1,117 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.png">
<title>在线考试系统</title>
<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
</head>
<body>
<noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<div id="loading-mask">
<div class="loading-wrapper">
<span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
</div>
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.png">
<title>在线考试系统</title>
<!-- 定义加载中的样式 -->
<style>
#loading-mask {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
user-select: none;
z-index: 9999;
overflow: hidden;
}
.loading-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.loading-dot {
animation: antRotate 1.2s infinite linear;
transform: rotate(45deg);
position: relative;
display: inline-block;
font-size: 64px;
width: 64px;
height: 64px;
box-sizing: border-box;
}
.loading-dot i {
width: 22px;
height: 22px;
position: absolute;
display: block;
background-color: #1890ff;
border-radius: 100%;
transform: scale(.75);
transform-origin: 50% 50%;
opacity: .3;
animation: antSpinMove 1s infinite linear alternate;
}
.loading-dot i:nth-child(1) {
top: 0;
left: 0;
}
.loading-dot i:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.loading-dot i:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
.loading-dot i:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes antSpinMove {
to {
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- 当JavaScript被禁用时显示提示信息 -->
<noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 应用的主容器 -->
<div id="app">
<!-- 加载中的遮罩层 -->
<div id="loading-mask">
<div class="loading-wrapper">
<span class="loading-dot loading-dot-spin">
<i></i>
<i></i>
<i></i>
<i></i>
</span>
</div>
<!-- built files will be auto injected -->
</body>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>

148
frontend/public/loading/loading.css
Unescape View File

@ -1 +1,147 @@
#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
/* 定义页面预加载动画的样式 */
#preloadingAnimation{
/* 设置预加载动画的定位方式和位置 */
position:fixed;
left:0;top:0;
/* 设置预加载动画的高度和宽度 */
height:100%;
width:100%;
/* 设置预加载动画的背景颜色 */
background:#ffffff;
/* 禁止文本选择 */
user-select:none;
/* 设置预加载动画的层级关系 */
z-index: 9999;
/* 隐藏溢出的内容 */
overflow: hidden
}
/* 定义加载动画的样式 */
.lds-roller{
/* 设置加载动画的显示方式和定位方式 */
display:inline-block;
position:relative;
/* 设置加载动画的位置 */
left:50%;
top:50%;
/* 设置加载动画的尺寸 */
width:64px;
height:64px;
/* 将加载动画居中显示 */
transform:translate(-50%,-50%);
}
/* 定义加载动画中每个部分的样式 */
.lds-roller div{
/* 设置加载动画的动画效果 */
animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
/* 设置加载动画的变换原点 */
transform-origin:32px 32px;
}
/* 定义加载动画中每个部分的伪元素样式 */
.lds-roller div:after{
/* 设置伪元素的内容和显示方式 */
content:" ";display:block;
/* 设置伪元素的定位方式 */
position:absolute;
/* 设置伪元素的尺寸 */
width:6px;
height:6px;
/* 设置伪元素的形状 */
border-radius:50%;
/* 设置伪元素的背景颜色 */
background:#13c2c2;
/* 设置伪元素的位置 */
margin:-3px 0 0 -3px;
}
/* 定义加载动画中每个部分的动画延迟时间 */
.lds-roller div:nth-child(1){
animation-delay:-0.036s;
}
.lds-roller div:nth-child(2){
animation-delay:-0.072s;
}
.lds-roller div:nth-child(3){
animation-delay:-0.108s;
}
.lds-roller div:nth-child(4){
animation-delay:-0.144s;
}
.lds-roller div:nth-child(5){
animation-delay:-0.18s;
}
.lds-roller div:nth-child(6){
animation-delay:-0.216s;
}
.lds-roller div:nth-child(7){
animation-delay:-0.252s;
}
.lds-roller div:nth-child(8){
animation-delay:-0.288s;
}
/* 定义加载动画中每个部分的伪元素的位置 */
.lds-roller div:nth-child(1):after{
top:50px;
left:50px;
}
.lds-roller div:nth-child(2):after{
top:54px;
left:45px;
}
.lds-roller div:nth-child(3):after{
top:57px;
left:39px;
}
.lds-roller div:nth-child(4):after{
top:58px;
left:32px;
}
.lds-roller div:nth-child(5):after{
top:57px;
left:25px;
}
.lds-roller div:nth-child(6):after{
top:54px;
left:19px;
}
.lds-roller div:nth-child(7):after{
top:50px;
left:14px;
}
.lds-roller div:nth-child(8):after{
top:45px;left:10px;
}
/* 定义预加载动画中的加载提示样式 */
#preloadingAnimation .load-tips{
/* 设置加载提示的颜色和字体大小 */
color: #13c2c2;font-size:2rem;
/* 设置加载提示的定位方式 */
position:absolute;
/* 设置加载提示的位置 */
left:50%;
top:50%;
/* 将加载提示居中显示 */
transform:translate(-50%,-50%);
/* 设置加载提示的外边距 */
margin-top:80px;
/* 设置加载提示的文本对齐方式 */
text-align:center;
/* 设置加载提示的宽度和高度 */
width:400px;
height:64px;
}
/* 定义加载动画的动画关键帧 */
@keyframes lds-roller{
/* 设置动画开始时的旋转角度 */
0%{transform:rotate(0deg);
}
/* 设置动画结束时的旋转角度 */
100%{
transform:rotate(360deg);
}
}

18
frontend/public/loading/loading.html
Unescape View File

@ -1 +1,17 @@
<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
<!-- 预加载动画容器 -->
<div id="preloadingAnimation">
<!-- lds-roller类用于定义加载动画的样式 -->
<div class="lds-roller">
<!-- 以下多个div元素共同构成一个滚动加载的动画效果 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 加载提示文本 -->
<div class="load-tips">Loading</div>
</div>

36
frontend/public/loading/option2/loading.css
Unescape View File

@ -1 +1,35 @@
.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}
/* 定义预加载动画的样式 */
.preloading-animate{
/* 设置背景颜色为白色 */
background:#ffffff;
/* 设置宽度和高度为100%，以覆盖整个视口 */
width:100%;
height:100%;
/* 使用固定定位，以便页面滚动时保持位置不变 */
position:fixed;
/* 设置左边和顶部位置为0，从屏幕左上角开始 */
left:0;
top:0;
/* 设置z-index以确保预加载动画在大多数元素之上显示 */
z-index:299;
}
/* 定义预加载动画内部包装器的样式 */
.preloading-animate .preloading-wrapper{
/* 设置为绝对定位，以便相对于预加载动画元素定位 */
position:absolute;
/* 设置宽度和高度为5rem，用于控制动画的大小 */
width:5rem;
height:5rem;
/* 使用左50%和顶50%定位，然后通过变换将其中心点对齐到屏幕中心 */
left:50%;
top:50%;
/* 使用translate变换将元素向左和向上移动自身宽度和高度的一半，实现居中 */
transform:translate(-50%,-50%);
}
/* 定义预加载动画内部小球的样式 */
.preloading-animate .preloading-wrapper .preloading-balls{
/* 设置字体大小为5rem，可能用于控制动画小球的大小 */
font-size:5rem;
}

Write Preview
Loading…
Cancel
Save