效果展示
在開發中,爲了提高用戶體驗,通常在加載數據的時候會給一個
loading
提示,這裏分享幾個簡單的loading
加載效果
根據序號查看代碼,尾部有整合代碼Gitee
鏈接
01
<div class="loading"></div>
.loading {
width: 30px;
height: 30px;
border: 2px solid #1890ff;
border-top-color: transparent;
border-radius: 50%;
animation: rotate 0.75s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
02
<div class="loading"></div>
.loading {
width: 30px;
height: 30px;
border: 2px solid #1890ff;
border-bottom: 2px solid rgba(24, 144, 255, 0.2);
border-left: 2px solid rgba(24, 144, 255, 0.2);
border-right: 2px solid rgba(24, 144, 255, 0.2);
border-radius: 50%;
animation: rotate 0.75s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
03
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
column-gap: 8px;
}
.loading div {
width: 10px;
height: 10px;
background-color: #1890ff;
border-radius: 50%;
animation: jump 0.6s alternate infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.2s;
}
.loading div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes jump {
to {
opacity: 0.1;
transform: translateY(-16px);
}
}
04
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
column-gap: 10px;
}
.loading div {
width: 10px;
height: 10px;
background-color: #1890ff;
border-radius: 50%;
animation: wq_scale 0.6s alternate infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.2s;
}
.loading div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes wq_scale {
from {
opacity: 0.1;
transform: scale(0.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
05
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.loading {
width: 40px;
height: 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
animation: rotate 1.3s linear infinite;
}
.loading div {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #1890ff;
}
.loading div:nth-child(2) {
opacity: 0.8;
}
.loading div:nth-child(3) {
opacity: 0.6;
}
.loading div:nth-child(4) {
opacity: 0.4;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
06
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
column-gap: 5px;
}
.loading div {
width: 5px;
height: 15px;
background-color: #1890ff;
animation: wq_scaleY 1.2s ease-in-out infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.1s;
}
.loading div:nth-child(3) {
animation-delay: 0.2s;
}
.loading div:nth-child(4) {
animation-delay: 0.3s;
}
.loading div:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes wq_scaleY {
0%,
40%,
100% {
transform: scaleY(1);
}
20% {
transform: scaleY(2.5);
}
}
07
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
column-gap: 5px;
height: 30px;
overflow-y: hidden;
}
.loading div {
width: 5px;
height: 50px;
background-color: #1890ff;
animation: wq_translateY 1s ease-in-out infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.1s;
}
.loading div:nth-child(3) {
animation-delay: 0.2s;
}
.loading div:nth-child(4) {
animation-delay: 0.3s;
}
.loading div:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes wq_translateY {
0%,
40%,
100% {
transform: translateY(20px);
}
20% {
transform: translateY(0);
}
}
08
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(5, 15px);
}
.loading div {
width: 10px;
height: 10px;
background-color: rgba(24, 144, 255, .5);
position: relative;
}
.loading div:nth-child(1)::before {
content: "";
width: 10px;
height: 10px;
background-color: #1890ff;
z-index: 1;
position: absolute;
left: 0;
top: 0;
animation: wq_step 1s steps(5, end) infinite;
}
@keyframes wq_step {
to {
transform: translateX(75px);
}
}
09
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.loading {
display: grid;
grid-template-columns: repeat(5, 15px);
}
.loading div {
width: 10px;
height: 10px;
border-radius: 50%;
background: #1890ff;
animation: wq_load 1s ease infinite;
}
.loading div:nth-child(1) {
animation-delay: 0.2s;
}
.loading div:nth-child(2) {
animation-delay: 0.4s;
}
.loading div:nth-child(3) {
animation-delay: 0.6s;
}
.loading div:nth-child(4) {
animation-delay: 0.8s;
}
.loading div:nth-child(5) {
animation-delay: 1s;
}
@keyframes wq_load {
0% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0.2;
transform: scale(0.3);
}
}
10
<div class="loading">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.loading {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
}
.loading .item {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.loading .item:nth-child(1) {
border-bottom: 7px solid #1890ff;
transform: rotateX(15deg) rotateY(-45deg);
animation: rotate_one 1s linear infinite -0.8s;
}
.loading .item:nth-child(2) {
border-bottom: 7px solid #f40968;
transform: rotateX(50deg) rotateY(10deg);
animation: rotate_two 1s linear infinite -0.4s;
}
.loading .item:nth-child(3) {
border-bottom: 7px solid #77d970;
transform: rotateX(35deg) rotateY(55deg);
animation: rotate_three 1s linear infinite;
}
@keyframes rotate_one {
to {
transform: rotateX(15deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate_two {
to {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate_three {
to {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
代碼:https://gitee.com/wenqingkey/loading_effect
轉自:https://blog.csdn.net/qq_48960335/article/details/128293156
loading1.vue
<template>
<div>
<div class="loading"></div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
width: 30px;
height: 30px;
border: 2px solid #1890ff;
border-top-color: transparent;
border-radius: 50%;
animation: rotate 0.75s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
</style>
loading2.vue
<template>
<div>
<div class="loading"></div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
width: 30px;
height: 30px;
border: 2px solid #1890ff;
border-bottom: 2px solid rgba(24, 144, 255, 0.2);
border-left: 2px solid rgba(24, 144, 255, 0.2);
border-right: 2px solid rgba(24, 144, 255, 0.2);
border-radius: 50%;
animation: rotate 0.75s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
</style>
loading3.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
column-gap: 8px;
}
.loading div {
width: 10px;
height: 10px;
background-color: #1890ff;
border-radius: 50%;
animation: jump 0.6s alternate infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.2s;
}
.loading div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes jump {
to {
opacity: 0.1;
transform: translateY(-16px);
}
}
</style>
loading4.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
column-gap: 10px;
}
.loading div {
width: 10px;
height: 10px;
background-color: #1890ff;
border-radius: 50%;
animation: wq_scale 0.6s alternate infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.2s;
}
.loading div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes wq_scale {
from {
opacity: 0.1;
transform: scale(0.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>
loading5.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
width: 40px;
height: 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
animation: rotate 1.3s linear infinite;
}
.loading div {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #1890ff;
}
.loading div:nth-child(2) {
opacity: 0.8;
}
.loading div:nth-child(3) {
opacity: 0.6;
}
.loading div:nth-child(4) {
opacity: 0.4;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
</style>
loading6.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
column-gap: 5px;
}
.loading div {
width: 5px;
height: 15px;
background-color: #1890ff;
animation: wq_scaleY 1.2s ease-in-out infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.1s;
}
.loading div:nth-child(3) {
animation-delay: 0.2s;
}
.loading div:nth-child(4) {
animation-delay: 0.3s;
}
.loading div:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes wq_scaleY {
0%,
40%,
100% {
transform: scaleY(1);
}
20% {
transform: scaleY(2.5);
}
}
</style>
loading7.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
column-gap: 5px;
height: 30px;
overflow-y: hidden;
}
.loading div {
width: 5px;
height: 50px;
background-color: #1890ff;
animation: wq_translateY 1s ease-in-out infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.1s;
}
.loading div:nth-child(3) {
animation-delay: 0.2s;
}
.loading div:nth-child(4) {
animation-delay: 0.3s;
}
.loading div:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes wq_translateY {
0%,
40%,
100% {
transform: translateY(20px);
}
20% {
transform: translateY(0);
}
}
</style>
loading8.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(5, 15px);
}
.loading div {
width: 10px;
height: 10px;
background-color: rgba(24, 144, 255, .5);
position: relative;
}
.loading div:nth-child(1)::before {
content: "";
width: 10px;
height: 10px;
background-color: #1890ff;
z-index: 1;
position: absolute;
left: 0;
top: 0;
animation: wq_step 1s steps(5, end) infinite;
}
@keyframes wq_step {
to {
transform: translateX(75px);
}
}
</style>
loading9.vue
<template>
<div>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
display: grid;
grid-template-columns: repeat(5, 15px);
}
.loading div {
width: 10px;
height: 10px;
border-radius: 50%;
background: #1890ff;
animation: wq_load 1s ease infinite;
}
.loading div:nth-child(1) {
animation-delay: 0.2s;
}
.loading div:nth-child(2) {
animation-delay: 0.4s;
}
.loading div:nth-child(3) {
animation-delay: 0.6s;
}
.loading div:nth-child(4) {
animation-delay: 0.8s;
}
.loading div:nth-child(5) {
animation-delay: 1s;
}
@keyframes wq_load {
0% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0.2;
transform: scale(0.3);
}
}
</style>
loading10.vue
<template>
<div>
<div class="loading">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
}
.loading .item {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.loading .item:nth-child(1) {
border-bottom: 7px solid #1890ff;
transform: rotateX(15deg) rotateY(-45deg);
animation: rotate_one 1s linear infinite -0.8s;
}
.loading .item:nth-child(2) {
border-bottom: 7px solid #f40968;
transform: rotateX(50deg) rotateY(10deg);
animation: rotate_two 1s linear infinite -0.4s;
}
.loading .item:nth-child(3) {
border-bottom: 7px solid #77d970;
transform: rotateX(35deg) rotateY(55deg);
animation: rotate_three 1s linear infinite;
}
@keyframes rotate_one {
to {
transform: rotateX(15deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate_two {
to {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate_three {
to {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
</style>
LoadingIndex.vue
<template>
<div class="index">
<div class="item" v-for="(item, index) in allCom" :key="item">
<span class="order">{{ index + 1 > 9 ? index + 1 : "0" + (index + 1) }}</span>
<component :is="item"></component>
</div>
<div class="item">待續......</div>
</div>
</template>
<script>
export default {
components: {
Loading1: () => import("@/components/loading1.vue"),
Loading2: () => import("@/components/loading2.vue"),
Loading3: () => import("@/components/loading3.vue"),
Loading4: () => import("@/components/loading4.vue"),
Loading5: () => import("@/components/loading5.vue"),
Loading6: () => import("@/components/loading6.vue"),
Loading7: () => import("@/components/loading7.vue"),
Loading8: () => import("@/components/loading8.vue"),
Loading9: () => import("@/components/loading9.vue"),
Loading10: () => import("@/components/loading10.vue"),
},
data() {
return {
allCom: [
"Loading1",
"Loading2",
"Loading3",
"Loading4",
"Loading5",
"Loading6",
"Loading7",
"Loading8",
"Loading9",
"Loading10",
],
};
},
};
</script>
<style lang="less" scoped>
.index {
width: 100%;
min-height: 100vh;
color: #fff;
background-color: black;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 180px);
gap: 10px;
.item {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #aaa;
border-radius: 15px;
width: 100%;
height: 100%;
display: grid;
place-content: center;
.order {
position: absolute;
left: 10px;
bottom: 10px;
}
}
.item:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
</style>