用于列表下拉加载loading动画
时间:2022-07-23
本文章向大家介绍用于列表下拉加载loading动画,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、效果图
弹跳加载
二、实现代码
<view class="bouncing-loader">
<view></view>
<view></view>
<view></view>
</view>
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -20rpx, 0);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > view {
width: 15rpx;
height: 15rpx;
margin: 30rpx 2rpx;
background: red;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > view:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > view:nth-child(3) {
animation-delay: 0.4s;
}
- 永恒不变的魅力
- MobileNet教程(2):用TensorFlow搭建安卓手机上的图像分类App
- OpenDaylight与Mininet应用实战之流表操作三
- 天啊,这个围笑代表什么?麻省理工的AI比你更懂 | 论文+Demo
- elixir:灵丹妙药?or 徒有其名?
- OpenDaylight与Mininet应用实战之三层转发机制四
- 程序员效率指南
- 【每日播报】OpenDaylight与Mininet应用实战之复杂网络验证(五)
- Docker hackathon, teamspark 及团队协作软件设计上的思考
- 应用开发中的网络安全
- 力作|phpcms_v9.6.1 任意文件下载漏洞
- 从开发者的角度看:打包和部署
- 撰写合格的REST API
- 想让服务器跑得快,并不是换个编程语言那么简单
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Qt编写安防视频监控系统34-onvif事件订阅
- Qt编写安防视频监控系统35-onvif抓拍图片
- Qt音视频开发1-vlc解码播放
- 【TBase开源版测评】分布式数据自动shard分片
- STL—mt19937
- 潘石屹用Python解决100个问题 | 字符类型统计
- 潘石屹用Python解决100个问题 | 分解质因数
- 使用Java Spring消费MySQL中的数据库存储过程
- 部署 Docker 及配置
- 【Spark on K8S】Spark里的k8s client
- 【每日一题】30. Substring with Concatenation of All Words
- MySQL选错索引导致的线上慢查询事故复盘
- 【Kubernetes】additionalPrinterColumns的配置
- ES使用json字符串索引文档时报错
- VUE 过滤输入框中的特殊字符 只保存中文、英文及数字