搜索
创作
提问
登录注册
展开

专栏首页kyle的专栏用于列表下拉加载loading动画

用于列表下拉加载loading动画

阅读 780

一、效果图

弹跳加载

二、实现代码

<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;
}

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react中使用prop-types检测props数据类型

    在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件...

    _kyle

  • 关于弹窗广告—定时器、遮罩层

    今天在家里办公，大学同学发了个消息，说在外面谈客户，客户的网站出了问题，需要帮忙处理下。

    _kyle

  • 使用item2+oh my zsh优化终端体验

    不习惯使用terminal，于是使用了item2搭配oh my zsh ，下面是效果图

    _kyle

  • ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索

    魏晓蕾

  • C++解决常胜将军问题

    现有21根火柴，两人轮流取，每人每次可以取走1至4根，不可多取，也不能不取，谁取最后一根火柴谁输。请编写一个程序进行人机对弈，要求人先取，计算机后取；计算机一方...

    week

  • C语音3

    #import <Foundation/Foundation.h> // //int main(int argc, const char * argv[]) {...

    py3study

  • hdu1046

    @坤的

  • 关于打击QQ平台野生动物交易行为的公告

    1月26日，中国疾控中心在武汉华南海鲜市场检测出大量新型冠状病毒，检测报告显示该病毒来源于市场所销售的野生动物。此前，钟南山院士公开指出：新型冠状病毒较大可能是...

    用户6966869

  • 划时代的三星Galaxy S9|S9+，会有哪些惊艳你的点？

    镁客网

  • C语言入门系列之9.预处理

    在之前，已多次使用过以#号开头的预处理命令，如包含命令#include <stdio.h>、宏定义命令#define PI 3.1415926535等。 ...

    cutercorley
更多文章

作者介绍

_kyle

前端工程师
专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券