话不多说，直接上代码
第一种
wxml中的代码
view id='loading_mask' view id='loading_box' view id='loading_svg' text style="animation:shuck1 0.75s infinite;transform: translate(34px,6px);"/text text style="animation:shuck2 0.75s infinite;transform: translate(54px,14px);"/text text style="animation:shuck3 0.75s infinite;transform: translate(62px,34px);"/text text style="animation:shuck4 0.75s infinite;transform: translate(54px,54px);"/text text style="animation:shuck5 0.75s infinite;transform: translate(34px,62px);"/text text style="animation:shuck6 0.75s infinite;transform: translate(14px,54px);"/text text style="animation:shuck7 0.75s infinite;transform: translate(6px,34px);"/text text style="animation:shuck8 0.75s infinite;transform: translate(14px,14px);"/text /view text id='loading_txt'正在加载.../text /view/viewwxss中的代码
@keyframes shuck1 { 0% {opacity: .85;} 12.5% {opacity: .7;} 25% {opacity: .4;} 37.5% {opacity: .3;} 50% {opacity: .3;} 62.5% {opacity: .3;} 75% {opacity: 1;} 87.5% {opacity: .9;} 100% {opacity: .85;}}@keyframes shuck2 { 0% {opacity: 0.9;} 12.5% {opacity: 0.85;} 25% {opacity: 0.7;} 37.5% {opacity: 0.4;} 50% {opacity: 0.3;} 62.5% {opacity: 0.3;} 75% {opacity: 0.3;} 87.5% {opacity: 1;} 100% {opacity: .9;}}@keyframes shuck3 { 0% {opacity: 1;} 12.5% {opacity: 0.9;} 25% {opacity: 0.85;} 37.5% {opacity: 0.7;} 50% {opacity: 0.4;} 62.5% {opacity: 0.3;} 75% {opacity: 0.3;} 87.5% {opacity: 0.3;} 100% {opacity: 1;}}@keyframes shuck4 { 0% {opacity: 0.3;} 12.5% {opacity: 1;} 25% {opacity: 0.9;} 37.5% {opacity: 0.85;} 50% {opacity: 0.7;} 62.5% {opacity: 0.4;} 75% {opacity: 0.3;} 87.5% {opacity: 0.3;} 100% {opacity: 0.3;}}@keyframes shuck5 { 0% {opacity: 0.3;} 12.5% {opacity: 0.3;} 25% {opacity: 1;} 37.5% {opacity: 0.9;} 50% {opacity: 0.85;} 62.5% {opacity: 0.7;} 75% {opacity: 0.4;} 87.5% {opacity: 0.3;} 100% {opacity: 0.3;}}@keyframes shuck6 { 0% {opacity: 0.3;} 12.5% {opacity: 0.3;} 25% {opacity: 0.3;} 37.5% {opacity: 1;} 50% {opacity: 0.9;} 62.5% {opacity: 0.85;} 75% {opacity: 0.7;} 87.5% {opacity: 0.4;} 100% {opacity: 0.3;}}@keyframes shuck7 { 0% {opacity: 0.4;} 12.5% {opacity: 0.3;} 25% {opacity: 0.3;} 37.5% {opacity: 0.3;} 50% {opacity: 1;} 62.5% {opacity: 0.9;} 75% {opacity: 0.85;} 87.5% {opacity: 0.7;} 100% {opacity: 0.4;}}@keyframes shuck8 { 0% {opacity: 0.7;} 12.5% {opacity: 0.4;} 25% {opacity: 0.3;} 37.5% {opacity: 0.3;} 50% {opacity: 0.3;} 62.5% {opacity: 1;} 75% {opacity: 0.9;} 87.5% {opacity: 0.85;} 100% {opacity: 0.7;}}#loading_mask { width: 100%; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; justify-content: center; align-items: center;}#loading_box { width: 150px; height: 150px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center;}#loading_svg { width: 80px; height: 80px; position: relative;}#loading_svg text{ width: 12px; height: 12px; background-color: #ffffff; border-radius: 50%; display: block; position: absolute;}#loading_txt{ max-width: 130px; font-size: 30rpx; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px;}第二种
wxml中的代码
view id='loading_mask' view id='loading_box' view id='loading_svg' text style="animation:scale1 0.75s infinite;left:34px;top:6px;"/text text style="animation:scale2 0.75s infinite;left:54px;top:14px;"/text text style="animation:scale3 0.75s infinite;left:62px;top:34px;"/text text style="animation:scale4 0.75s infinite;left:54px;top:54px;"/text text style="animation:scale5 0.75s infinite;left:34px;top:62px;"/text text style="animation:scale6 0.75s infinite;left:14px;top:54px;"/text text style="animation:scale7 0.75s infinite;left:6px;top:34px;"/text text style="animation:scale8 0.75s infinite;left:14px;top:14px;"/text /view text id='loading_txt'正在加载.../text /view/viewwxss中的代码
@keyframes scale1 { 0% {transform:scale(0.75,0.75);} 12.5% {transform:scale(0.625,0.625);} 25% {transform:scale(0.5,0.5);} 37.5% {transform:scale(0.375,0.375);} 50% {transform:scale(0.25,0.25);} 62.5% {transform:scale(0.125,0.125);} 75% {transform:scale(1,1);} 87.5% {transform:scale(0.875,0.875);} 100% {transform:scale(0.75,0.75);}}@keyframes scale2 { 0% {transform:scale(0.875,0.875);} 12.5% {transform:scale(0.75,0.75);} 25% {transform:scale(0.625,0.625);} 37.5% {transform:scale(0.5,0.5);} 50% {transform:scale(0.375,0.375);} 62.5% {transform:scale(0.25,0.25);} 75% {transform:scale(0.125,0.125);} 87.5% {transform:scale(1,1);} 100% {transform:scale(0.875,0.875);}}@keyframes scale3 { 0%{transform:scale(1,1);} 12.5%{transform:scale(0.875,0.875);} 25%{transform:scale(0.75,0.75);} 37.5%{transform:scale(0.625,0.625);} 50%{transform:scale(0.5,0.5);} 62.5%{transform:scale(0.375,0.375);} 75%{transform:scale(0.25,0.25);} 87.5%{transform:scale(0.125,0.125);} 100%{transform:scale(1,1);}}@keyframes scale4 { 0% {transform:scale(0.125,0.125);} 12.5% {transform:scale(1,1);} 25% {transform:scale(0.875,0.875);} 37.5% {transform:scale(0.75,0.75);} 50% {transform:scale(0.625,0.625);} 62.5% {transform:scale(0.5,0.5);} 75% {transform:scale(0.375,0.375);} 87.5% {transform:scale(0.25,0.25);} 100% {transform:scale(0.125,0.125);}}@keyframes scale5 { 0% {transform:scale(0.25,0.25);} 12.5% {transform:scale(0.125,0.125);} 25% {transform:scale(1,1);} 37.5% {transform:scale(0.875,0.875);} 50% {transform:scale(0.75,0.75);} 62.5% {transform:scale(0.625,0.625);} 75% {transform:scale(0.5,0.5);} 87.5% {transform:scale(0.375,0.375);} 100% {transform:scale(0.25,0.25);}}@keyframes scale6 { 0% {transform:scale(0.375,0.375);} 12.5% {transform:scale(0.25,0.25);} 25% {transform:scale(0.125,0.125);} 37.5% {transform:scale(1,1);} 50% {transform:scale(0.875,0.875);} 62.5% {transform:scale(0.75,0.75);} 75% {transform:scale(0.625,0.625);} 87.5% {transform:scale(0.5,0.5);} 100% {transform:scale(0.375,0.375);}}@keyframes scale7 { 0% {transform:scale(0.5,0.5);} 12.5% {transform:scale(0.375,0.375);} 25% {transform:scale(0.25,0.25);} 37.5% {transform:scale(0.125,0.125);} 50% {transform:scale(1,1);} 62.5% {transform:scale(0.875,0.875);} 75% {transform:scale(0.75,0.75);} 87.5% {transform:scale(0.625,0.625);} 100% {transform:scale(0.5,0.5);}}@keyframes scale8 { 0% {transform:scale(0.625,0.625);} 12.5% {transform:scale(0.5,0.5);} 25% {transform:scale(0.375,0.375);} 37.5% {transform:scale(0.25,0.25);} 50% {transform:scale(0.125,0.125);} 62.5% {transform:scale(1,1);} 75% {transform:scale(0.875,0.875);} 87.5% {transform:scale(0.75,0.75);} 100% {transform:scale(0.625,0.625);}}#loading_mask { width: 100%; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; justify-content: center; align-items: center;}#loading_box { width: 150px; height: 150px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center;}#loading_svg { width: 80px; height: 80px; position: relative;}#loading_svg text{ width: 12px; height: 12px; background-color: #ffffff; border-radius: 50%; display: block; position: absolute;}#loading_txt{ max-width: 130px; font-size: 30rpx; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px;}这里只是两个例子，其他loading动画都是大同小异
