进入下面小程序可以体验效果：
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,直接显示花瓣加载动画
