skeleton.scss 777 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. @import 'mixins/mixins';
  2. @import 'common/var';
  3. @import "./skeleton-item.scss";
  4. @mixin skeleton-color() {
  5. background: linear-gradient(
  6. 90deg,
  7. $--skeleton-color 25%,
  8. $--skeleton-to-color 37%,
  9. $--skeleton-color 63%
  10. );
  11. background-size: 400% 100%;
  12. animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
  13. }
  14. @keyframes #{$namespace}-skeleton-loading {
  15. 0% {
  16. background-position: 100% 50%;
  17. }
  18. 100% {
  19. background-position: 0 50%;
  20. }
  21. }
  22. @include b(skeleton) {
  23. width: 100%;
  24. @each $unit in (first-line, paragraph) {
  25. @include e($unit) {
  26. height: 16px;
  27. margin-top: 16px;
  28. background: $--skeleton-color;
  29. }
  30. }
  31. @include when(animated) {
  32. .#{$namespace}-skeleton__item {
  33. @include skeleton-color();
  34. }
  35. }
  36. }