antd-mobile/es/refresh-control/style/index.css

基于 React 的移动设计规范实现

.am-refresh-control {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.am-refresh-control-content {
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.am-refresh-control-ptr {
  color: grey;
  text-align: center;
  height: 50px;
  margin-top: -50px;
  overflow: hidden;
}
.am-refresh-control-ptr-icon {
  display: block;
}
.am-refresh-control-ptr-loading {
  display: none;
}
.am-refresh-control-loading .am-refresh-control-ptr-icon {
  display: none;
}
.am-refresh-control-loading .am-refresh-control-ptr-loading {
  display: block;
}
.am-refresh-control-pull {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.am-refresh-control-release {
  display: none;
}
.am-refresh-control-pull,
.am-refresh-control-release {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.am-refresh-control-pull .am-icon,
.am-refresh-control-release .am-icon,
.am-refresh-control-pull span,
.am-refresh-control-release span {
  display: block;
}
.am-refresh-control-active .am-refresh-control-pull {
  display: none;
}
.am-refresh-control-active .am-refresh-control-release {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.am-refresh-control-deactive .am-refresh-control-ptr-icon,
.am-refresh-control-deactive .am-refresh-control-ptr-loading {
  display: none;
}