效果展示

Demo代码

wxml

 <view class="loading-screen"><view class="loading"><view class="flour" ></view><view class="flour" ></view><view class="flour" ></view><view class="flour" ></view></view></view>

wxss

page{margin: 0;padding: 0;
}.loading-screen{width: 100%;height: 100vh;background-color: #2e2e2e;position: fixed;display: flex;align-items: center;justify-content: center;
}.loading{width: 80px;display: flex;flex-wrap: wrap;
.
.
.
完整代码获取见文章末尾

效果展示（改进）

Demo代码

wxml

  <view class="loading-screen"><view class="loading"><view class="flour_1" ></view><view class="flour_2" ></view><view class="flour_3" ></view><view class="flour_4" ></view></view></view>

wxss

page{margin: 0;padding: 0;
}.loading-screen{width: 100%;height: 100vh;background-color: #2e2e2e;position: fixed;display: flex;align-items: center;justify-content: center;
}.loading{width: 80px;display: flex;flex-wrap: wrap;animation: rotate 4s linear infinite;
}@keyframes rotate{to{transform: rotate(360deg);}
}/* 四色版本 */
.loading .flour_1{width: 32px;height: 32px;background-color: #eb4d4b;margin: 4px;
.
.
.
完整代码获取如下

微信小程序--加载动画：旋转方块相关推荐

微信小程序--加载动画：收缩方块
效果展示 Demo代码 index.wxml <view class="loading"><view class="a"></vi ...
微信小程序--加载动画：炫酷能量球
效果展示 Demo代码 index.wxml <view><view class="container circle"><view class=&qu ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
uniapp微信小程序加载spine动画
目录 1.XMLHttpRequest封装 spine-webgl小程序适配修改加载动画 1.XMLHttpRequest封装 function XMLHttpRequest() {this.con ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...

微信小程序--加载动画：旋转方块

效果展示

Demo代码

效果展示（改进）

Demo代码

微信小程序--加载动画：旋转方块相关推荐

最新文章

热门文章