tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置倍速

Browse Source
This commit is contained in:
yanghang
2025-07-02 11:04:58 +08:00
parent bf638b894c
commit 58adee173b
9 changed files with 617 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/loading.vue
+352
View File
@@ -0,0 +1,352 @@
<template>
<view :class="['loading', type]">
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</view>
</template>
<script>
import { computed } from 'vue'
export default {
name:"loading",
props:{
type:{
default: 'cr',// cl cr easy
type: String
},
size: {
default: '32',
type: [String, Number]
},
color: {
default: 'black',
type: String
}
},
computed:{
loadingWidth(){
return this.size + 'rpx'
},
easyLoadingWidth(){
return Number(this.size) * 15 / 16 + 'rpx'
},
easyLoadingBorderWidth(){
return Number(this.size) / 16 + 'rpx'
},
loadingColor(){
return this.color
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.loading.easy {
width: v-bind(easyLoadingWidth);
height: v-bind(easyLoadingWidth);
border-style: solid;
border-color: v-bind(loadingColor);
border-width: v-bind(easyLoadingBorderWidth);
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
// 转转转动画
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.loading,
.loading.cl > view {
position: relative;
box-sizing: border-box;
}
.loading.cl {
display: block;
font-size: 0;
color: v-bind(loadingColor);
}
.loading.cl.la-dark {
color: #333;
}
.loading.cl > view {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading.cl {
width: v-bind(loadingWidth);
height: v-bind(loadingWidth);
}
.loading.cl > view {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
transform: translate(-50%, -50%);
border-radius: 100%;
animation: ball-spin-clockwise 1s infinite ease-in-out;
}
.loading.cl > view:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -0.875s;
}
.loading.cl > view:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -0.75s;
}
.loading.cl > view:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -0.625s;
}
.loading.cl > view:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -0.5s;
}
.loading.cl > view:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -0.375s;
}
.loading.cl > view:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -0.25s;
}
.loading.cl > view:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -0.125s;
}
.loading.cl > view:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: 0s;
}
.loading.cl.la-sm {
width: 50%;
height: 50%;
}
.loading.cl.la-sm > view {
width:12.5%;
height:12.5%;
transform: translate(-50%, -50%);
}
.loading.cl.la-2x {
width: 64rpx;
height: 64rpx;
}
.loading.cl.la-2x > view {
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
}
.loading.cl.la-3x {
width: 96rpx;
height: 96rpx;
}
.loading.cl.la-3x > view {
width: 24rpx;
height: 24rpx;
transform: translate(-50%, -50%);
}
@keyframes ball-spin-clockwise {
0%,
100% {
opacity: 1;
transform: scale(1);
}
20% {
opacity: 1;
}
80% {
opacity: 0;
transform: scale(0);
}
}
.loading.cr,
.loading.cr > view {
position: relative;
box-sizing: border-box;
}
.loading.cr {
display: block;
font-size: 0;
color: v-bind(loadingColor);
}
.loading.cr.la-dark {
color: #333;
}
.loading.cr > view {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading.cr {
width: v-bind(loadingWidth);
height: v-bind(loadingWidth);
}
.loading.cr > view {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
transform: translate(-50%, -50%);
border-radius: 100%;
animation: ball-spin 1s infinite ease-in-out;
}
.loading.cr > view:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -1.125s;
}
.loading.cr > view:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -1.25s;
}
.loading.cr > view:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -1.375s;
}
.loading.cr > view:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -1.5s;
}
.loading.cr > view:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -1.625s;
}
.loading.cr > view:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -1.75s;
}
.loading.cr > view:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -1.875s;
}
.loading.cr > view:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: -2s;
}
.loading.cr.la-sm {
width: 50%;
height: 50%;
}
.loading.cr.la-sm > view {
width:12.5%;
height:12.5%;
transform: translate(-50%, -50%);
}
.loading.cr.la-2x {
width: 64rpx;
height: 64rpx;
}
.loading.cr.la-2x > view {
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
}
.loading.cr.la-3x {
width: 96rpx;
height: 96rpx;
}
.loading.cr.la-3x > view {
width: 24rpx;
height: 24rpx;
transform: translate(-50%, -50%);
}
@keyframes ball-spin {
0%,
100% {
opacity: 1;
transform: scale(1);
}
20% {
opacity: 1;
}
80% {
opacity: 0;
transform: scale(0);
}
}
</style>