refresher.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .uni-scroll-view-refresher {
  2. position: relative;
  3. overflow: hidden;
  4. flex-shrink: 0;
  5. }
  6. .uni-scroll-view-refresher-container {
  7. position: absolute;
  8. width: 100%;
  9. bottom: 0;
  10. display: flex;
  11. flex-direction: column-reverse;
  12. }
  13. .uni-scroll-view-refresh {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. right: 0;
  18. bottom: 0;
  19. display: flex;
  20. flex-direction: row;
  21. justify-content: center;
  22. align-items: center;
  23. }
  24. .uni-scroll-view-refresh-inner {
  25. display: flex;
  26. align-items: center;
  27. justify-content: center;
  28. line-height: 0;
  29. width: 40px;
  30. height: 40px;
  31. border-radius: 50%;
  32. background-color: #fff;
  33. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
  34. 0 1px 4px rgba(0, 0, 0, 0.117647);
  35. }
  36. .uni-scroll-view-refresh__spinner {
  37. transform-origin: center center;
  38. animation: uni-scroll-view-refresh-rotate 2s linear infinite;
  39. }
  40. .uni-scroll-view-refresh__spinner > circle {
  41. stroke: currentColor;
  42. stroke-linecap: round;
  43. animation: uni-scroll-view-refresh-dash 2s linear infinite;
  44. }
  45. @keyframes uni-scroll-view-refresh-rotate {
  46. 0% {
  47. transform: rotate(0deg);
  48. }
  49. 100% {
  50. transform: rotate(360deg);
  51. }
  52. }
  53. @keyframes uni-scroll-view-refresh-dash {
  54. 0% {
  55. stroke-dasharray: 1, 200;
  56. stroke-dashoffset: 0;
  57. }
  58. 50% {
  59. stroke-dasharray: 89, 200;
  60. stroke-dashoffset: -35px;
  61. }
  62. 100% {
  63. stroke-dasharray: 89, 200;
  64. stroke-dashoffset: -124px;
  65. }
  66. }