pace.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. #loading-bar,
  2. #loading-bar-spinner {
  3. -webkit-pointer-events: none;
  4. pointer-events: none;
  5. transition: 350ms linear all;
  6. }
  7. #loading-bar.ng-enter,
  8. #loading-bar.ng-leave.ng-leave-active,
  9. #loading-bar-spinner.ng-enter,
  10. #loading-bar-spinner.ng-leave.ng-leave-active {
  11. opacity: 0;
  12. }
  13. #loading-bar.ng-enter.ng-enter-active,
  14. #loading-bar.ng-leave,
  15. #loading-bar-spinner.ng-enter.ng-enter-active,
  16. #loading-bar-spinner.ng-leave {
  17. opacity: 1;
  18. }
  19. #loading-bar .bar {
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. z-index: 20002;
  24. width: 100%;
  25. height: 2px;
  26. background: #20a8d8;
  27. border-top-right-radius: 1px;
  28. border-bottom-right-radius: 1px;
  29. transition: width 350ms;
  30. }
  31. #loading-bar .peg {
  32. position: absolute;
  33. top: 0;
  34. right: 0;
  35. width: 70px;
  36. height: 2px;
  37. border-radius: 100%;
  38. -ms-box-shadow: #29d 1px 0 6px 1px;
  39. box-shadow: #29d 1px 0 6px 1px;
  40. opacity: .45;
  41. }
  42. #loading-bar-spinner {
  43. position: fixed;
  44. top: 10px;
  45. left: 10px;
  46. z-index: 10002;
  47. display: block;
  48. }
  49. #loading-bar-spinner .spinner-icon {
  50. width: 14px;
  51. height: 14px;
  52. border: solid 2px transparent;
  53. border-top-color: #29d;
  54. border-left-color: #29d;
  55. border-radius: 50%;
  56. -webkit-animation: loading-bar-spinner 400ms linear infinite;
  57. animation: loading-bar-spinner 400ms linear infinite;
  58. }
  59. @-webkit-keyframes loading-bar-spinner {
  60. 0% {
  61. -webkit-transform: rotate(0deg);
  62. transform: rotate(0deg);
  63. }
  64. 100% {
  65. -webkit-transform: rotate(360deg);
  66. transform: rotate(360deg);
  67. }
  68. }
  69. @keyframes loading-bar-spinner {
  70. 0% {
  71. -webkit-transform: rotate(0deg);
  72. transform: rotate(0deg);
  73. transform: rotate(0deg);
  74. }
  75. 100% {
  76. -webkit-transform: rotate(360deg);
  77. transform: rotate(360deg);
  78. transform: rotate(360deg);
  79. }
  80. }
  81. .pace {
  82. -webkit-pointer-events: none;
  83. pointer-events: none;
  84. -moz-user-select: none;
  85. -webkit-user-select: none;
  86. -ms-user-select: none;
  87. user-select: none;
  88. }
  89. .pace-inactive {
  90. display: none;
  91. }
  92. .pace .pace-progress {
  93. position: fixed;
  94. top: 0;
  95. right: 100%;
  96. z-index: 2000;
  97. width: 100%;
  98. height: 2px;
  99. background: #20a8d8;
  100. }