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

用于列表下拉加载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;
}

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

我来说两句

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

扫码关注云+社区

领取腾讯云代金券