nprogress.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. #nprogress {
  2. pointer-events: none;
  3. .bar {
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. z-index: 3000;
  8. width: 100%;
  9. height: 2px;
  10. background: hsl(var(--primary));
  11. }
  12. .peg {
  13. position: absolute;
  14. right: 0;
  15. display: block;
  16. width: 100px;
  17. height: 100%;
  18. box-shadow: 0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary));
  19. opacity: 1;
  20. transform: rotate(3deg) translate(0, -4px);
  21. }
  22. .spinner {
  23. position: fixed;
  24. top: 11px;
  25. right: 14px;
  26. z-index: 2000;
  27. display: block;
  28. .spinner-icon {
  29. box-sizing: border-box;
  30. width: 18px;
  31. height: 18px;
  32. border: solid 2px transparent;
  33. border-top-color: hsl(var(--primary));
  34. border-left-color: hsl(var(--primary));
  35. border-radius: 50%;
  36. animation: nprogress-spinner 400ms linear infinite;
  37. }
  38. }
  39. }
  40. .nprogress-custom-parent {
  41. position: relative;
  42. overflow: hidden;
  43. #nprogress .spinner,
  44. #nprogress .bar {
  45. position: absolute;
  46. }
  47. }
  48. @keyframes nprogress-spinner {
  49. 0% { transform: rotate(0deg); }
  50. 100% { transform: rotate(360deg); }
  51. }
  52. @keyframes nprogress-spinner {
  53. 0% { transform: rotate(0deg); }
  54. 100% { transform: rotate(360deg); }
  55. }