pace.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .pace {
  2. -webkit-pointer-events: none;
  3. pointer-events: none;
  4. -webkit-user-select: none;
  5. -moz-user-select: none;
  6. user-select: none;
  7. }
  8. .pace-inactive {
  9. display: none;
  10. }
  11. .pace .pace-progress {
  12. background: #fff;
  13. position: fixed;
  14. z-index: 2000;
  15. top: 0;
  16. right: 100%;
  17. width: 100%;
  18. height: 2px;
  19. }
  20. .pace .pace-progress-inner {
  21. display: block;
  22. position: absolute;
  23. right: 0px;
  24. width: 100px;
  25. height: 100%;
  26. box-shadow: 0 0 10px #fff, 0 0 5px #fff;
  27. opacity: 1.0;
  28. -webkit-transform: rotate(3deg) translate(0px, -4px);
  29. -moz-transform: rotate(3deg) translate(0px, -4px);
  30. -ms-transform: rotate(3deg) translate(0px, -4px);
  31. -o-transform: rotate(3deg) translate(0px, -4px);
  32. transform: rotate(3deg) translate(0px, -4px);
  33. }
  34. .pace .pace-activity {
  35. display: block;
  36. position: fixed;
  37. z-index: 2000;
  38. top: 15px;
  39. right: 50%;
  40. width: 14px;
  41. height: 14px;
  42. border: solid 2px transparent;
  43. border-top-color: #fff;
  44. border-left-color: #fff;
  45. border-radius: 10px;
  46. -webkit-animation: pace-spinner 400ms linear infinite;
  47. -moz-animation: pace-spinner 400ms linear infinite;
  48. -ms-animation: pace-spinner 400ms linear infinite;
  49. -o-animation: pace-spinner 400ms linear infinite;
  50. animation: pace-spinner 400ms linear infinite;
  51. }
  52. @media (max-width: 767px) {
  53. .pace .pace-activity {
  54. top: 15px;
  55. right: 15px;
  56. width: 14px;
  57. height: 14px;
  58. }
  59. }
  60. @-webkit-keyframes pace-spinner {
  61. 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  62. 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  63. }
  64. @-moz-keyframes pace-spinner {
  65. 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  66. 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
  67. }
  68. @-o-keyframes pace-spinner {
  69. 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  70. 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
  71. }
  72. @-ms-keyframes pace-spinner {
  73. 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  74. 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
  75. }
  76. @keyframes pace-spinner {
  77. 0% { transform: rotate(0deg); transform: rotate(0deg); }
  78. 100% { transform: rotate(360deg); transform: rotate(360deg); }
  79. }