nprogress.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * UI v1.0.0
  3. * Copyright 2015-2017 Muyao
  4. * Licensed under the Muyao License 1.0
  5. */
  6. #nprogress {
  7. pointer-events: none;
  8. }
  9. #nprogress .bar {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. z-index: 9999;
  14. width: 100%;
  15. height: 3px;
  16. background: rgb(32, 160, 255);
  17. border:1px solid rgba(255,255,255,.5);
  18. }
  19. #nprogress .spinner {
  20. position: fixed;
  21. top: 15px;
  22. right: 15px;
  23. z-index: 9999;
  24. display: block;
  25. }
  26. #nprogress .spinner-icon {
  27. width: 18px;
  28. height: 18px;
  29. -webkit-box-sizing: border-box;
  30. -moz-box-sizing: border-box;
  31. box-sizing: border-box;
  32. border: solid 2px transparent;
  33. border-top-color: #62a8ea;
  34. border-left-color: #62a8ea;
  35. border-radius: 50%;
  36. -webkit-animation: nprogress-spinner 400ms linear infinite;
  37. -o-animation: nprogress-spinner 400ms linear infinite;
  38. animation: nprogress-spinner 400ms linear infinite;
  39. }
  40. .nprogress-custom-parent {
  41. position: relative;
  42. overflow: hidden;
  43. }
  44. .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
  45. position: absolute;
  46. }
  47. @-webkit-keyframes nprogress-spinner {
  48. 0% {
  49. -webkit-transform: rotate(0deg);
  50. }
  51. 100% {
  52. -webkit-transform: rotate(360deg);
  53. }
  54. }
  55. @-o-keyframes nprogress-spinner {
  56. 0% {
  57. -o-transform: rotate(0deg);
  58. transform: rotate(0deg);
  59. }
  60. 100% {
  61. -o-transform: rotate(360deg);
  62. transform: rotate(360deg);
  63. }
  64. }
  65. @keyframes nprogress-spinner {
  66. 0% {
  67. -webkit-transform: rotate(0deg);
  68. -o-transform: rotate(0deg);
  69. transform: rotate(0deg);
  70. }
  71. 100% {
  72. -webkit-transform: rotate(360deg);
  73. -o-transform: rotate(360deg);
  74. transform: rotate(360deg);
  75. }
  76. }
  77. #nprogress .bar.nprogress-bar-header {
  78. top: 60px;
  79. }
  80. .site-navbar-small #nprogress .bar.nprogress-bar-header {
  81. top: 60px;
  82. }
  83. #nprogress .bar.nprogress-bar-bottom {
  84. top: auto;
  85. bottom: 0;
  86. }
  87. #nprogress .nprogress-bar-primary {
  88. background-color: #62a8ea;
  89. }
  90. #nprogress .nprogress-bar-success {
  91. background-color: #46be8a;
  92. }
  93. #nprogress .nprogress-bar-info {
  94. background-color: #57c7d4;
  95. }
  96. #nprogress .nprogress-bar-warning {
  97. background-color: #f2a654;
  98. }
  99. #nprogress .nprogress-bar-danger {
  100. background-color: #f96868;
  101. }
  102. #nprogress .nprogress-bar-dark {
  103. background-color: #526069;
  104. }
  105. #nprogress .nprogress-bar-light {
  106. background-color: #ccd5db;
  107. }