skeletonPlaceholder.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .skeletonPlaceholder {
  2. position: absolute;
  3. overflow: hidden;
  4. width: 100%;
  5. height: 100%;
  6. align-items: center;
  7. display: flex;
  8. flex-direction: column;
  9. justify-content: center;
  10. min-height: 100%;
  11. z-index: 100;
  12. &:after {
  13. z-index: 101;
  14. content: '';
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. height: 100%;
  19. width: 100%;
  20. transform: rotate(30deg) scale(1.75);
  21. 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%);
  22. animation: skeleton-loader 1.5s infinite;
  23. }
  24. &>div.shimmer {
  25. display: flex;
  26. flex-direction: column;
  27. align-items: center;
  28. justify-content: center;
  29. height: 100%;
  30. z-index: 100;
  31. &>img {
  32. max-width: 256px;
  33. max-height: 256px;
  34. min-width: calc(100% / 4);
  35. min-height: calc(100% / 4);
  36. box-sizing: border-box;
  37. }
  38. &>svg.shimmer {
  39. z-index: 100;
  40. }
  41. }
  42. &.placeholderText {
  43. @include theming(color, text-03);
  44. }
  45. @keyframes skeleton-loader {
  46. 0% {
  47. left: -150%;
  48. }
  49. 100% {
  50. left: 150%;
  51. }
  52. }
  53. }