E企盈营销工具技术服务商 热线:4006-838-530

微信小程序自实现loading

E企盈直播平台营销卖货系统

话不多说,直接上代码第一种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动画都是大同小异

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自实现loading
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏