| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- .vue-skeleton-loading {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: $zindex-mask;
- font-size: 12px;
- background: #fff;
- @keyframes backpos {
- from {
- background-position-x: -200px;
- }
- to {
- background-position-x: calc(200px + 100%);
- }
- }
- .skeleton-bac-animation {
- position: absolute;
- z-index: auto;
- width: 100%;
- height: 100%;
- background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
- background-size: 30% 100%;
- background-repeat: no-repeat;
- -webkit-animation: backpos 0.9s ease-in-out 0s infinite;
- animation: backpos 0.9s ease-in-out 0s infinite;
- }
- .skeleton-bac-content {
- overflow: hidden;
- }
- }
- .vue-skeleton-column {
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .vue-skeleton-row {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .vue-skeleton-square-wrap {
- justify-content: center;
- display: flex;
- flex-direction: column;
- .vue-skeleton-square {
- width: 100%;
- }
- }
|