github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-13 09:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

update loading

Browse Source
This commit is contained in:
kuaifan 2022-09-08 21:31:22 +08:00
parent 081aadf468
commit 757606ecc5
11 changed files with 45 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/build/258.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/build/503.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/build/710.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/build/845.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/hash
View File

@ -1 +1 @@
1068357027585caf
3815ac139a58e98a

7
resources/assets/js/components/Loading.vue
View File

@ -1,8 +1,9 @@
<template>
<ETooltip :disabled="windowSmall || content == ''" :content="content">
<svg viewBox="25 25 50 50" class="common-loading">
<svg v-if="type === 'svg'" viewBox="25 25 50 50" class="common-loading">
<circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="common-path"></circle>
</svg>
<div v-else class="common-pureing"></div>
</ETooltip>
</template>
@ -10,6 +11,10 @@
export default {
name: 'Loading',
props: {
type: {
type: String,
default: 'svg'
},
content: {
type: [String, Number],
default: ''

4
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -106,9 +106,7 @@
@on-emoji="onEmoji"
@on-show-emoji-user="onShowEmojiUser">
<template slot="header">
<div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading">
<div class="loading-spinner"></div>
</div>
<div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading"><Loading type="pure"/></div>
<div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
</template>
</VirtualList>

33
resources/assets/sass/components/loading.scss vendored
View File

@ -6,22 +6,35 @@
max-height: 100%;
margin: auto;
overflow: hidden;
animation: rotate 2s linear infinite;
animation: loading-rotate 2s linear infinite;
.common-path {
fill: none;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: path-dash 1.5s ease-in-out infinite, path-color 6s ease-in-out infinite;
}
}
@keyframes rotate {
.common-pureing {
width: 30px;
height: 30px;
border: 3px solid #eeeeee;
border-bottom-color: $primary-color;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: pureing-rotation 0.75s linear infinite;
}
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
@keyframes dash {
@keyframes path-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
@ -37,7 +50,8 @@
stroke-dashoffset: -124
}
}
@keyframes color {
@keyframes path-color {
0%, to {
stroke: #d62d20
}
@ -54,3 +68,12 @@
stroke: #ffa700
}
}
@keyframes pureing-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

40
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -920,45 +920,11 @@
box-sizing: content-box;
justify-content: center;
.loading-spinner {
position: relative;
.common-pureing {
margin: 0;
width: 18px;
height: 18px;
text-indent: -9999em;
border-radius: 50%;
background: linear-gradient(to right, #ccc 10%, rgba(255, 255, 255, 0) 42%);
animation: spinner-load 1.4s infinite linear;
transform: translateZ(0);
@keyframes spinner-load {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
&:before {
width: 50%;
height: 50%;
background: #ccc;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
&:after {
background: #ffffff;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
border-width: 2px;
}
}