nprogress.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /* Make clicks pass-through */
  2. #nprogress {
  3. pointer-events: none;
  4. }
  5. #nprogress .bar {
  6. @apply bg-primary;
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. z-index: 1031;
  11. width: 100%;
  12. height: 2px;
  13. }
  14. /* Fancy blur effect */
  15. #nprogress .peg {
  16. position: absolute;
  17. right: 0;
  18. display: block;
  19. width: 100px;
  20. height: 100%;
  21. box-shadow:
  22. 0 0 10px hsl(var(--primary)),
  23. 0 0 5px hsl(var(--primary));
  24. opacity: 1;
  25. transform: rotate(3deg) translate(0, -4px);
  26. }
  27. /* Remove these to get rid of the spinner */
  28. #nprogress .spinner {
  29. position: fixed;
  30. top: 15px;
  31. right: 15px;
  32. z-index: 1031;
  33. display: block;
  34. }
  35. #nprogress .spinner-icon {
  36. box-sizing: border-box;
  37. width: 18px;
  38. height: 18px;
  39. border: solid 2px transparent;
  40. border-top-color: hsl(var(--primary));
  41. border-left-color: hsl(var(--primary));
  42. border-radius: 50%;
  43. animation: nprogress-spinner 400ms linear infinite;
  44. }
  45. .nprogress-custom-parent {
  46. position: relative;
  47. overflow: hidden;
  48. }
  49. .nprogress-custom-parent #nprogress .spinner,
  50. .nprogress-custom-parent #nprogress .bar {
  51. position: absolute;
  52. }
  53. @keyframes nprogress-spinner {
  54. 0% {
  55. transform: rotate(0deg);
  56. }
  57. 100% {
  58. transform: rotate(360deg);
  59. }
  60. }
  61. @keyframes nprogress-spinner {
  62. 0% {
  63. transform: rotate(0deg);
  64. }
  65. 100% {
  66. transform: rotate(360deg);
  67. }
  68. }