CSS Loaders为小程序添加Css加载动画

时光和破碎的梦想，被埋葬在一起不停地发酵，无法停止，即使青春踏过沼泽，它也会随着花香而来

小程序上使用的过渡动画，加载动画使用场景不多。毕竟对小程序来时他是一种即用即走的存在

而大多数小程序在加载数据之时使用wx.showModal提示一下，或者添加一个gif的动态图标

在很久之前有写过一个关于《如何在微信小程序中使用Lottie动画库，JSON动画？》；原生使用Lottie动画，他还是一丢丢操作门槛，若使用gif要在保证清晰度的同时体积同比增加

反之CSS动画解决了上手难度，体积两大问题：CSS Loaders

截图

使用教程

1.wxml添加一个元素

<view class="loader"></view> 

2.鼠标放在css加载动画上面提示复制css，添加到wxss文件

/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  color: #f03355;
  background: conic-gradient(currentColor 0 270deg,#0000 0);
  border-radius: 50%;
  animation: l14-0 4s infinite linear;
}
.loader::before {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  border-top-left-radius: 100px;
  background: currentColor;
  animation: l14 0.5s infinite alternate;
}
@keyframes l14-0 {
    0%,24.99%  {transform: rotate(0deg)}
    25%,49.99% {transform: rotate(90deg)}
    50%,74.99% {transform: rotate(180deg)}
    75%,100%   {transform: rotate(270deg)}
}
@keyframes l14 {
    100%  {transform: translate(-10px,-10px)}
}

3.需要注意的加载动画需要自己添加定位层级背景之类

例如要做全屏加载，你需要手动添加定位和z-index层级

例如只想做在页面中间提示加载动画，需要自己添加一个背景容器等等

地址

https://css-loaders.com/circle/

总结

Css永远的女神