skeleton.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. .vue-skeleton-loading {
  2. position: fixed;
  3. top: 0;
  4. right: 0;
  5. bottom: 0;
  6. left: 0;
  7. z-index: $zindex-mask;
  8. font-size: 12px;
  9. background: #fff;
  10. @keyframes backpos {
  11. from {
  12. background-position-x: -200px;
  13. }
  14. to {
  15. background-position-x: calc(200px + 100%);
  16. }
  17. }
  18. .skeleton-bac-animation {
  19. position: absolute;
  20. z-index: auto;
  21. width: 100%;
  22. height: 100%;
  23. background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
  24. background-size: 30% 100%;
  25. background-repeat: no-repeat;
  26. -webkit-animation: backpos 0.9s ease-in-out 0s infinite;
  27. animation: backpos 0.9s ease-in-out 0s infinite;
  28. }
  29. .skeleton-bac-content {
  30. overflow: hidden;
  31. }
  32. }
  33. .vue-skeleton-column {
  34. display: flex;
  35. flex-direction: column;
  36. justify-content: center;
  37. }
  38. .vue-skeleton-row {
  39. display: flex;
  40. flex-direction: row;
  41. align-items: center;
  42. }
  43. .vue-skeleton-square-wrap {
  44. justify-content: center;
  45. display: flex;
  46. flex-direction: column;
  47. .vue-skeleton-square {
  48. width: 100%;
  49. }
  50. }