123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- .skeletonPlaceholder {
- position: absolute;
- overflow: hidden;
- width: 100%;
- height: 100%;
- align-items: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100%;
- z-index: 100;
-
- &:after {
- z-index: 101;
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- transform: rotate(30deg) scale(1.75);
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
- animation: skeleton-loader 1.5s infinite;
- }
- &>div.shimmer {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- z-index: 100;
- &>img {
- max-width: 256px;
- max-height: 256px;
- min-width: calc(100% / 4);
- min-height: calc(100% / 4);
- box-sizing: border-box;
- }
- &>svg.shimmer {
- z-index: 100;
- }
- }
- &.placeholderText {
- @include theming(color, text-03);
- }
- @keyframes skeleton-loader {
- 0% {
- left: -150%;
- }
- 100% {
- left: 150%;
- }
- }
- }
|