前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用于列表下拉加载loading动画

用于列表下拉加载loading动画

作者头像
_kyle
发布2020-08-24 12:39:51
3.5K0
发布2020-08-24 12:39:51
举报
文章被收录于专栏:kyle的专栏kyle的专栏kyle的专栏

一、效果图

弹跳加载

二、实现代码

<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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、效果图
  • 二、实现代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档