上拉加载下拉刷新demo_微信小程序加载动画：追光

效果展示

Demo代码

index.wxml

<view class="ring">
 Haihong
 <view class="a">view>
view>

index.wxss

page {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  background-color: #262626; /* 背景颜色 */
}
/* Loading字符串 */
.ring {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 距上部 */
  left: 50%; /* 距左部 */
  transform: translate(-50%, -50%); /* 相对于自身，x,y轴移动 */
  width: 150px; /* 宽 */
  height: 150px; /* 高 */
  background: transparent; /* 背景颜色透明 */
  border: 3px solid #3c3c3c; /* 边框 */
  border-radius: 50%; /* 边框圆角 */
  text-align: center; /* 字体水平居中 */
  line-height: 150px; /* 行高 */
  font-family: sans-serif; /* 字体样式 */
  font-size: 20px; /* 字体大小 */
  color: #fff000; /* 颜色 */
  letter-spacing: 4px; /* 字符间距 */
  text-shadow: 0 0 10px #fff000; /* 字体阴影 */
  box-shadow: 0 0 20 rgba(0, 0, 0, .5); /* 盒子阴影 */
  user-select: none; /* 无法选中 */
}
/* 黄色长线 */
.ring::before {
  content: ''; /* 内容 */
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #fff000;
  border-right: 3px solid #fff000;
  border-radius: 50%;
  animation: animateCircle 2s linear infinite; /* 动画：名称 时间 速率 重复 */
}

.a {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left; /* 动画开始位置 */
  animation: animate 2s linear infinite;
  transform: rotate(45deg);
}

.a::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff000;
  top: -8px;
  right: -8px;
  box-shadow: 0 0 20px #fff000;
}

@keyframes animate {
  100% {
    /* 360+45 */
    transform: rotate(405deg); 
  }
}

@keyframes animateCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

index.json

{
  "usingComponents": {}
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

说明

Demo已同步至小程序：海轰Pro