.pull-to-refresh-ios { position: relative; } .pull-to-refresh-ios__spinner { position: absolute; top: 16px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); 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 { -webkit-animation: pull-to-refresh-ios-refreshing 2s; animation: pull-to-refresh-ios-refreshing 2s; } @-webkit-keyframes pull-to-refresh-ios-refreshing { from { -webkit-transform: translate3d(-50%, 0, 0) rotate(0deg); transform: translate3d(-50%, 0, 0) rotate(0deg); } to { -webkit-transform: translate3d(-50%, 0, 0) rotate(360deg); transform: translate3d(-50%, 0, 0) rotate(360deg); } } @keyframes pull-to-refresh-ios-refreshing { from { -webkit-transform: translate3d(-50%, 0, 0) rotate(0deg); transform: translate3d(-50%, 0, 0) rotate(0deg); } to { -webkit-transform: translate3d(-50%, 0, 0) rotate(360deg); transform: translate3d(-50%, 0, 0) rotate(360deg); } } .pull-to-refresh--restoring .pull-to-refresh-ios__spinner { -webkit-animation: pull-to-refresh-ios-restoring 0.15s forwards; animation: pull-to-refresh-ios-restoring 0.15s forwards; } @-webkit-keyframes pull-to-refresh-ios-restoring { from { -webkit-transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1); transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1); } to { -webkit-transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0); transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0); } } @keyframes pull-to-refresh-ios-restoring { from { -webkit-transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1); transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1); } to { -webkit-transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0); transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0); } } .pull-to-refresh--refreshing .pull-to-refresh-ios__blade { -webkit-animation: pull-to-refresh-ios-fade 1s linear infinite; 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) { -webkit-animation-delay: -1s; animation-delay: -1s; -webkit-transform: rotate(0deg) translate(0, -120%); transform: rotate(0deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(2) { -webkit-animation-delay: -0.91667s; animation-delay: -0.91667s; -webkit-transform: rotate(30deg) translate(0, -120%); transform: rotate(30deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(3) { -webkit-animation-delay: -0.83333s; animation-delay: -0.83333s; -webkit-transform: rotate(60deg) translate(0, -120%); transform: rotate(60deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(4) { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; -webkit-transform: rotate(90deg) translate(0, -120%); transform: rotate(90deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(5) { -webkit-animation-delay: -1.66667s; animation-delay: -1.66667s; -webkit-transform: rotate(120deg) translate(0, -120%); transform: rotate(120deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(6) { -webkit-animation-delay: -1.58333s; animation-delay: -1.58333s; -webkit-transform: rotate(150deg) translate(0, -120%); transform: rotate(150deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(7) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; -webkit-transform: rotate(180deg) translate(0, -120%); transform: rotate(180deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(8) { -webkit-animation-delay: -1.41667s; animation-delay: -1.41667s; -webkit-transform: rotate(210deg) translate(0, -120%); transform: rotate(210deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(9) { -webkit-animation-delay: -1.33333s; animation-delay: -1.33333s; -webkit-transform: rotate(240deg) translate(0, -120%); transform: rotate(240deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(10) { -webkit-animation-delay: -1.25s; animation-delay: -1.25s; -webkit-transform: rotate(270deg) translate(0, -120%); transform: rotate(270deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(11) { -webkit-animation-delay: -1.16667s; animation-delay: -1.16667s; -webkit-transform: rotate(300deg) translate(0, -120%); transform: rotate(300deg) translate(0, -120%); } .pull-to-refresh-ios__blade:nth-child(12) { -webkit-animation-delay: -1.08333s; animation-delay: -1.08333s; -webkit-transform: rotate(330deg) translate(0, -120%); transform: rotate(330deg) translate(0, -120%); } @-webkit-keyframes pull-to-refresh-ios-fade { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 0.25; } } @keyframes pull-to-refresh-ios-fade { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 0.25; } }