pageRefresh.css 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. uni-page-refresh {
  2. position: absolute;
  3. top: 0;
  4. width: 100%;
  5. height: 40px;
  6. display: block;
  7. box-sizing: border-box;
  8. }
  9. .uni-page-refresh {
  10. position: absolute;
  11. top: -45px;
  12. left: 50%;
  13. transform: translate3d(-50%, 0, 0);
  14. width: 40px;
  15. height: 40px;
  16. justify-content: center;
  17. align-items: center;
  18. background: #fff;
  19. border-radius: 50%;
  20. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
  21. 0 1px 4px rgba(0, 0, 0, 0.117647);
  22. display: none;
  23. z-index: 997;
  24. }
  25. .uni-page-refresh-inner {
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. line-height: 0;
  30. width: 40px;
  31. height: 40px;
  32. border-radius: 50%;
  33. }
  34. .uni-page-refresh--pulling .uni-page-refresh,
  35. .uni-page-refresh--aborting .uni-page-refresh,
  36. .uni-page-refresh--reached .uni-page-refresh,
  37. .uni-page-refresh--refreshing .uni-page-refresh,
  38. .uni-page-refresh--restoring .uni-page-refresh {
  39. display: flex;
  40. }
  41. .uni-page-refresh--pulling .uni-page-refresh__spinner,
  42. .uni-page-refresh--aborting .uni-page-refresh__spinner,
  43. .uni-page-refresh--reached .uni-page-refresh__spinner,
  44. .uni-page-refresh--refreshing .uni-page-refresh__icon,
  45. .uni-page-refresh--restoring .uni-page-refresh__icon {
  46. display: none;
  47. }
  48. .uni-page-refresh--refreshing .uni-page-refresh__spinner {
  49. transform-origin: center center;
  50. animation: uni-page-refresh-rotate 2s linear infinite;
  51. }
  52. .uni-page-refresh--refreshing .uni-page-refresh__path {
  53. stroke-dasharray: 1, 200;
  54. stroke-dashoffset: 0;
  55. stroke-linecap: round;
  56. animation: uni-page-refresh-dash 1.5s ease-in-out infinite,
  57. uni-page-refresh-colorful 6s ease-in-out infinite;
  58. }
  59. @keyframes uni-page-refresh-rotate {
  60. 100% {
  61. -webkit-transform: rotate(360deg);
  62. transform: rotate(360deg);
  63. }
  64. }
  65. @keyframes uni-page-refresh-dash {
  66. 0% {
  67. stroke-dasharray: 1, 200;
  68. stroke-dashoffset: 0;
  69. }
  70. 50% {
  71. stroke-dasharray: 89, 200;
  72. stroke-dashoffset: -35px;
  73. }
  74. 100% {
  75. stroke-dasharray: 89, 200;
  76. stroke-dashoffset: -124px;
  77. }
  78. }