mobile-pull-to-refresh/src/styles/ios/style.css

Pull to refresh

.pull-to-refresh-ios {
  position: relative;
}

.pull-to-refresh-ios__spinner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 28px;
  height: 28px;
  display: none;
}

.pull-to-refresh--pulling .pull-to-refresh-ios__spinner,
.pull-to-refresh--aborting .pull-to-refresh-ios__spinner,
.pull-to-refresh--reached .pull-to-refresh-ios__spinner,
.pull-to-refresh--refreshing .pull-to-refresh-ios__spinner,
.pull-to-refresh--restoring .pull-to-refresh-ios__spinner {
  display: block;
}

.pull-to-refresh-ios__blade {
  position: absolute;
  left: 13px;
  top: 10px;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background-color: #565E6D;
}

.pull-to-refresh--refreshing .pull-to-refresh-ios__spinner {
  animation: pull-to-refresh-ios-refreshing 2s;
}

@keyframes pull-to-refresh-ios-refreshing {
  from {
    transform: translate3d(-50%, 0, 0) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, 0, 0) rotate(360deg);
  }
}

.pull-to-refresh--restoring .pull-to-refresh-ios__spinner {
  animation: pull-to-refresh-ios-restoring 0.15s forwards;
}

@keyframes pull-to-refresh-ios-restoring {
  from {
    transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
  }

  to {
    transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0);
  }
}

.pull-to-refresh--refreshing .pull-to-refresh-ios__blade {
  animation: pull-to-refresh-ios-fade 1s linear infinite;
}

.pull-to-refresh--pulling .pull-to-refresh-ios__blade,
.pull-to-refresh--aborting .pull-to-refresh-ios__blade {
  opacity: 0;
}

.pull-to-refresh-ios__spinner--s1 .pull-to-refresh-ios__blade:nth-child(1) {
  opacity: 0.2;
}

.pull-to-refresh-ios__spinner--s2 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s2 .pull-to-refresh-ios__blade:nth-child(2) {
  opacity: 0.4;
}

.pull-to-refresh-ios__spinner--s3 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s3 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s3 .pull-to-refresh-ios__blade:nth-child(3) {
  opacity: 0.6;
}

.pull-to-refresh-ios__spinner--s4 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s4 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s4 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s4 .pull-to-refresh-ios__blade:nth-child(4) {
  opacity: 0.8;
}

.pull-to-refresh-ios__spinner--s5 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s5 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s5 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s5 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s5 .pull-to-refresh-ios__blade:nth-child(5) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(6) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s6 .pull-to-refresh-ios__blade:nth-child(6) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s7 .pull-to-refresh-ios__blade:nth-child(7) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(7),
.pull-to-refresh-ios__spinner--s8 .pull-to-refresh-ios__blade:nth-child(8) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(7),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(8),
.pull-to-refresh-ios__spinner--s9 .pull-to-refresh-ios__blade:nth-child(9) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(7),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(8),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(9),
.pull-to-refresh-ios__spinner--s10 .pull-to-refresh-ios__blade:nth-child(10) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(7),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(8),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(9),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(10),
.pull-to-refresh-ios__spinner--s11 .pull-to-refresh-ios__blade:nth-child(11) {
  opacity: 1;
}

.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(1),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(2),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(3),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(4),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(5),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(6),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(7),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(8),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(9),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(10),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(11),
.pull-to-refresh-ios__spinner--s12 .pull-to-refresh-ios__blade:nth-child(12) {
  opacity: 1;
}

.pull-to-refresh-ios__blade:nth-child(1) {
  animation-delay: -1s;
  transform: rotate(0deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(2) {
  animation-delay: -0.91667s;
  transform: rotate(30deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(3) {
  animation-delay: -0.83333s;
  transform: rotate(60deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(4) {
  animation-delay: -0.75s;
  transform: rotate(90deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(5) {
  animation-delay: -1.66667s;
  transform: rotate(120deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(6) {
  animation-delay: -1.58333s;
  transform: rotate(150deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(7) {
  animation-delay: -1.5s;
  transform: rotate(180deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(8) {
  animation-delay: -1.41667s;
  transform: rotate(210deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(9) {
  animation-delay: -1.33333s;
  transform: rotate(240deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(10) {
  animation-delay: -1.25s;
  transform: rotate(270deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(11) {
  animation-delay: -1.16667s;
  transform: rotate(300deg) translate(0, -120%);
}

.pull-to-refresh-ios__blade:nth-child(12) {
  animation-delay: -1.08333s;
  transform: rotate(330deg) translate(0, -120%);
}

@keyframes pull-to-refresh-ios-fade {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }

  100% {
    opacity: 0.25;
  }
}