1. Implement with a normal DIV tag

<div class="loading-container"></div>
Copy the code

CSS code

.loading-container{ width: 50px; /* Make the loading area square */ height: 50px; Animation: loading - animation0.8 s infinite linear; display: inline-block; /* Border: 3px solid #f3f3f3; /* Border: 3px solid #f3f3f3; /* Set the border size and color to light white */ border-top: 3px solid red; /* Set the top border color to red highlight so that the rotation can be seen */ border-radius: 50%; } @keyframes loading-animation{0 {transform: rotate(0deg);} @keyframes loading-animation{0 {transform: rotate(0deg); Transform: rotate(360deg); rotate(360deg); rotate(360deg); rotate(360deg); /* The animation is rotated 360 degrees */}}Copy the code

Take a look at the effect:

This can be used in small programs that, for reuse, can be packaged into components that dynamically pass in colors and displayed text

2. Draw in SVG

<svg viewBox="0 0 50 50" class="loading-svg-container"> <circle cx="25" cy="25" r="20" fill="none" class="path"></circle> </svg> .loading-svg-container { width: 50px; /* Set the size of the SVG display area */ height: 50px; } .path { stroke: #409eff; /* Set a color for the brush */ stroke-width: 2; /* Set the width of the line */ stroke-dasharray: 95, 126; /* Set the implementation length to 95, dashed line length to 126*/ stroke-dashoffset: 0; /* Animation: loading-dash 1.5s ease-in-out infinite; } @keyframes loading-dash { 0% { stroke-dasharray: 1, 126; /* solid line part 1, dashed line part 126*/ stroke-dashoffset: 0; /* front 1/126 shows solid line, back 125 shows blank */} 50% {stroke-dasharray: 95, 126; } to {stroke-dasharray: 6, 120; /* Solid line part 6, dashed line part 120*/ stroke-dashoffset: -120px; /* The first point is blank and the last 6 points are blank */}}Copy the code

3. Use img images or fonts

After downloading the loading icon or font from the website, I directly put it on the page for display. I chose a picture, which was just an ordinary picture, and I just needed to turn it around

<img src="loading.png" class="loading-icon"> .loading-icon{ animation: rotating 3s infinite linear; 0%} @ keyframes rotating {{transform: the rotate (0 deg) / * animation starting position for spin 0 degrees * /} to {transform: the rotate (1 turn) / * * 1 turns end animation is /}}Copy the code

4. Encapsulate the loading component

Effect, it has a background mask

<template> <view class="container" v-if="isShowLoading"> <view class="mask"></view> <view class="loading-container common"> <view class="rect1"></view> <view class="rect2"></view> <view class="rect3"></view> <view class="rect4"></view>  <view class="rect5"></view> </view> </view> </template> <script> export default { props: { isShowLoading: { type: Boolean, default: true } }, watch: { isShowLoading:{ deep: true, handler(newVal,oldVal) { setTimeout(() => { this.isShowLoading = false }, 300) } } } } </script> <style lang="scss"> .container{ .mask{ position: fixed; top: 0; left: 0; right: 0; z-index: 900; width: 100vw; height: 100vh; Background: rgba(75, 74, 74, 0.5); } .loading-container { position: fixed; top: 25%; left: 45%; z-index: 1000; justify-content: center; width: 50px; height: 40px; font-size: 10px; margin: 100px auto; text-align: center; . Rect2 {- its - animation - delay: - 1.1 s; Animation - delay: 1.1 s; }. Rect3 {animation-delay: -1.0s; }. Rect4 {animation-delay: -0.9s; }. Rect5 {animation-delay: -0.8s; } @frames sk-stretchdelay {0%, 40%, 100% {transform: scaleY(0.4); } 20% {transform: scaleY(1.0); } } } .loading-container view { height: 100%; width: 12rpx; margin-right: 10rpx; display: inline-block; background-color: #fff; Animation: SK-stretchdelay 1.2s infinite ease-in-out; } } </style>Copy the code