loading.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /deep/ .el-loading-parent--relative {
  2. position: relative !important;
  3. }
  4. /deep/ .el-loading-mask {
  5. position: absolute;
  6. z-index: 2000;
  7. background-color: rgba(0, 0, 0, 0.8);
  8. margin: 0;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. transition: opacity 0.3s;
  14. .el-loading-spinner {
  15. top: 50%;
  16. margin-top: -21px;
  17. width: 100%;
  18. text-align: center;
  19. position: absolute;
  20. }
  21. .el-loading-spinner .el-loading-text {
  22. color: #409eff;
  23. margin: 3px 0;
  24. font-size: 14px;
  25. }
  26. .el-loading-spinner .circular {
  27. height: 42px;
  28. width: 42px;
  29. animation: loading-rotate 2s linear infinite;
  30. }
  31. .el-loading-spinner .path {
  32. animation: loading-dash 1.5s ease-in-out infinite;
  33. stroke-dasharray: 90, 150;
  34. stroke-dashoffset: 0;
  35. stroke-width: 2;
  36. stroke: #409eff;
  37. stroke-linecap: round;
  38. }
  39. .el-loading-spinner i {
  40. color: #409eff;
  41. }
  42. .el-loading-fade-enter,
  43. .el-loading-fade-leave-active {
  44. opacity: 0;
  45. }
  46. @keyframes loading-rotate {
  47. to {
  48. transform: rotate(1turn);
  49. }
  50. }
  51. @keyframes loading-dash {
  52. 0% {
  53. stroke-dasharray: 1, 200;
  54. stroke-dashoffset: 0;
  55. }
  56. 50% {
  57. stroke-dasharray: 90, 150;
  58. stroke-dashoffset: -40px;
  59. }
  60. to {
  61. stroke-dasharray: 90, 150;
  62. stroke-dashoffset: -120px;
  63. }
  64. }
  65. }