.rc-pull-refresh {

}

.rc-ptr-box {
  position: absolute;
  top: -40px;
  display: block;
  height: 40px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.rc-ptr-box .rc-ptr-container {
  position: relative;
  width: 40px;
  margin: auto;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.rc-ptr-box .rc-ptr-image {
  position: absolute;
  top: 0;
  left: 12px;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  transition: transform .2s linear;
  line-height: 40px;
  width: 14px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNOS44NTQgMTkuMzU0bDYtNmEuNS41IDAgMCAwLS43MDctLjcwN0wxMCAxNy43OTNWMS41YS41LjUgMCAwIDAtMSAwdjE2LjI5M2wtNS4xNDUtNS4xNDZhLjUuNSAwIDAgMC0uNzA3LjcwOGw2IDZhLjUuNSAwIDAgMCAuNzA3IDB6Ii8+PC9zdmc+);
}

.rc-ptr-box .rc-ptr-image.rc-ptr-rotate {
  transform: translate3d(0, 0, 0) rotate(180deg);
}

.rc-ptr-box .rc-ptr-image.rc-ptr-loading {
  animation: ptr-spin 0.8s infinite linear;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MzIiIGhlaWdodD0iOTMyIiB2aWV3Qm94PSIwIDAgOTMyIDkzMiI+PHBhdGggZD0iTTQ2NiA5MzJjLTEyNC40NzMgMC0yNDEuNDk1LTQ4LjQ3My0zMjkuNTEzLTEzNi40ODdDNDguNDczIDcwNy40OTUgMCA1OTAuNDczIDAgNDY2YzAtODguMTM4IDI0Ljc0LTE3My45NjIgNzEuNTQ0LTI0OC4xOTIgNDUuNTA4LTcyLjE3MiAxMDkuODIzLTEzMC40OSAxODUuOTk2LTE2OC42NTJsMzkuMTM3IDc4LjEyQzIzNC43NTIgMTU4LjMgMTgyLjQ2IDIwNS43MiAxNDUuNDU1IDI2NC40MSAxMDcuNDYgMzI0LjY3IDg3LjM3NSAzOTQuMzc4IDg3LjM3NSA0NjZjMCAyMDguNzc0IDE2OS44NTMgMzc4LjYyNiAzNzguNjI2IDM3OC42MjZTODQ0LjYyNyA2NzQuNzc0IDg0NC42MjcgNDY2YzAtNzEuNjItMjAuMDg0LTE0MS4zMy01OC4wNzctMjAxLjU5LTM3LjAwOC01OC42OS04OS4zLTEwNi4xMS0xNTEuMjIzLTEzNy4xMzNsMzkuMTM3LTc4LjEyYzc2LjE3MyAzOC4xNiAxNDAuNDkgOTYuNDggMTg1Ljk5NiAxNjguNjVDOTA3LjI2MiAyOTIuMDQgOTMyLjAwMiAzNzcuODY0IDkzMi4wMDIgNDY2YzAgMTI0LjQ3My00OC40NzMgMjQxLjQ5NS0xMzYuNDg3IDMyOS41MTNDNzA3LjQ5NyA4ODMuNTI3IDU5MC40NzUgOTMyIDQ2Ni4wMDIgOTMyeiIvPjwvc3ZnPg==);
}

@keyframes ptr-spin {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

//加载更多
.rc-load-more {
  position: absolute;
  bottom: 20px;
  visibility: hidden;
  height: 20px;
  width: 100%;
}

.rc-load-more:after {
  position: absolute;
  height: 2rem;
  width: 2rem;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>') center no-repeat;
  background-size: 2rem 2rem;
  content: '';
  text-align: center;
  text-indent: 2rem;
  line-height: 4rem;
  color: #999;
  animation: rc-load-more 1s step-end infinite;
}

@keyframes rc-load-more {
  0% {
    transform: rotate(0deg)
  }
  8.33333333% {
    transform: rotate(30deg)
  }
  16.66666667% {
    transform: rotate(60deg)
  }
  25% {
    transform: rotate(90deg)
  }
  33.33333333% {
    transform: rotate(120deg)
  }
  41.66666667% {
    transform: rotate(150deg)
  }
  50% {
    transform: rotate(180deg)
  }
  58.33333333% {
    transform: rotate(210deg)
  }
  66.66666667% {
    transform: rotate(240deg)
  }
  75% {
    transform: rotate(270deg)
  }
  83.33333333% {
    transform: rotate(300deg)
  }
  91.66666667% {
    transform: rotate(330deg)
  }
  100% {
    transform: rotate(360deg)
  }
}