ptr.css

.ptr_scrollable {
  position: relative;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

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

.ptr_box .ptr_container {
  position: relative;
  width: 40px;
  margin: auto;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.ptr_box .ptr_text {
  font-size: 14px;
}

.ptr_box .ptr_image {
  position: absolute;
  top: 0px;
  left: 12px;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: center center;
  -webkit-transition: -webkit-transform .2s linear;
  transition: -webkit-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+);
}

.ptr_box .ptr_image.ptr_rotate {
  -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
}

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

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