微信小程序纯CSS实现好看的加载动画

进入下面小程序可以体验效果：

WXML:

<wxs module="img" src="./loading.wxs"></wxs>
<view class="loading-container {{show?'':'loading-container-hide'}}">
    <view class="loading-mask" wx:if="{{mask&&show}}"></view>
    <view class="loading-mask-solid {{!mask&&show?'':'loading-mask-solid-hide'}}"></view>
    <view class="loading">
        <view class="loading-inner {{open?'loading-inner-open':''}}"></view>
        <view class="loading-circle"></view>
        <view class="loading-petal {{open?'loading-petal-open':''}}">
            <view class="loading-petal-1">
                <image src="{{img.imgBase64}}"></image>
            </view>
            <view class="loading-petal-2">
                <image src="{{img.imgBase64}}"></image>
            </view>
            <view class="loading-petal-3">
                <image src="{{img.imgBase64}}"></image>
            </view>
            <view class="loading-petal-4">
                <image src="{{img.imgBase64}}"></image>
            </view>
            <view class="loading-petal-5">
                <image src="{{img.imgBase64}}"></image>
            </view>
        </view>
    </view>
</view>

WXSS：

.loading-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    opacity: 1;
}

.loading-container-hide{
    opacity: 0;
    transform: scale(0);
    transition: all 0.7s;
}

.loading-mask{
    height: 100%;
    width: 100%;
    position: absolute;
    backdrop-filter: blur(5px);
    background: #ffffffad;
}

.loading-mask-solid{
    height: 100%;
    width: 100%;
    position: absolute;
    background: white;
}

.loading-mask-solid-hide{
    opacity: 0;
    transition: all 0.5s;
}

.loading{
    position: absolute;
    width: 200rpx;
    height: 200rpx;
    animation: loadingMove 1.5s alternate infinite;
    animation-timing-function: ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-petal{
    position: absolute;
    opacity: 0;
    width: 160rpx;
    height: 160rpx;
    transform: scale(0.5);
}

.loading-petal-open{
    opacity: 1;
    transform: scale(1.2);
    transition: all 0.5s;
}

.loading-petal-1{
    position: absolute;
    animation: loadingpetal linear infinite 1.5s;
}

.loading-petal-2{
    position: absolute;
    animation: loadingpetal linear infinite 4s;
}

.loading-petal-3{
    position: absolute;
    animation: loadingpetal linear infinite reverse 2s;
}

.loading-petal-4{
    position: absolute;
    animation: loadingpetal linear infinite reverse 3.5s;
}

.loading-petal-5{
    position: absolute;
    animation: loadingpetal linear infinite reverse 4.5s;
}

@keyframes loadingpetal {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
}


image{
    width: 160rpx;
    height: 160rpx;
}

.loading-inner{
    width: 65rpx;
    height: 65rpx;
    background: rgb(71 135 255);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.loading-inner-open{
    background: rgb(0 66 189);
    width: 110rpx;
    height: 110rpx;
    transition: all 0.5s;
}

@keyframes loadingMove {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-8px);
    }
}

.loading-circle {
    position: absolute;
    z-index: 99;
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: block;
    background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23ffffff' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ffffff' stop-opacity='0' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23ffffff' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ffffff' stop-opacity='0' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23ffffff' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
    background-size: 100%;
    animation: loading linear infinite 1s;
    animation-timing-function: ease;
  }


  @keyframes loading {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

JS：

// components/loading/loading.js
Component({
    lifetimes:{
        created(){

        },
        attached(){

        }
    },
    observers: {
        'show': function(show) {
            var that =this;
            if(show){
                setTimeout(()=>{
                    that.setData({open:true,mask:true})
                },that.data.burstTime)
            }else{
                that.setData({mask:false})
                setTimeout(()=>{
                    that.setData({open:false})
                },500)
            }
        }
    },
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 是否显示
     */
    show:{
        type:Boolean,
        value:false
    },
    /**
     * 花瓣绽放时间
     */
    burstTime:{
        type:Number,
        value:1300
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    mask:false,
    open:false,
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

WXS：

var imagebase64="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJVWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDEgNzkuYzAyMDRiMiwgMjAyMy8wMi8wOS0wNjoyNjoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyNC4zIChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDMtMjJUMTY6MjI6MjcrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTAzLTIyVDE4OjM1OjExKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAzLTIyVDE4OjM1OjExKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5YzlhZDQwOS1mNzM1LThhNDUtYTUxMC0wMzExOThkYThlMzIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoxMDRhYTk0ZC0xMjc1LTAyNDktODcwYS1mZTYyNzE4OTY1OWEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNmYwNjI5ZS0wZWQ3LTk2NGUtYmY0Mi1iMDJkMzFmNjQxOGEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjM2ZjA2MjllLTBlZDctOTY0ZS1iZjQyLWIwMmQzMWY2NDE4YSIgc3RFdnQ6d2hlbj0iMjAyNC0wMy0yMlQxNjoyMjoyNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI0LjMgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmZjg5OTljOS1mMjE0LThjNGEtYmZmZS01OWRlYTQ0M2I2YjQiIHN0RXZ0OndoZW49IjIwMjQtMDMtMjJUMTY6NDQ6MDkrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4zIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZWE5YjVmYTItMDFlNS01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"

module.exports = {
    imgBase64: imagebase64
}

readme.me使用方式:

使用方式：
直接引入组件
<loading style="position: absolute;height: 100%;width: 100%;transition: all 0.2s;z-index: {{loadingShow?9999:0}};" 
    show="{{true}}" 
    burstTime="{{1000}}">
</loading>
说明：
    必须使用该style: position: absolute;height: 100%;width: 100%;transition: all 0.2s;z-index: {{loadingShow?9999:0}};
    show: 是否显示
    burstTime: 花瓣绽放时间 单位/ms. 参数0,直接显示花瓣加载动画