index.less 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-skeleton-paragraph {
  4. position: relative;
  5. overflow: hidden;
  6. &__row {
  7. height: @skeleton-paragraph-size;
  8. background: @skeleton-bg;
  9. width: 100%;
  10. margin-top: 16px;
  11. &:first-child {
  12. margin-top: 0;
  13. }
  14. &:nth-child(4n + 1) {
  15. width: 80%;
  16. }
  17. &:nth-child(4n + 2) {
  18. width: 100%;
  19. }
  20. &:nth-child(4n + 3) {
  21. width: 70%;
  22. }
  23. &:nth-child(4n + 4) {
  24. width: 85%;
  25. }
  26. }
  27. &--rounded &__row {
  28. border-radius: @skeleton-radius;
  29. }
  30. &--active &__row {
  31. background: linear-gradient(90deg, @skeleton-bg 25%, @skeleton-to-bg 37%, @skeleton-bg 63%);
  32. animation: loading 1.4s ease infinite;
  33. background-size: 400% 100%;
  34. }
  35. }
  36. @keyframes loading {
  37. 0% {
  38. background-position: 100% 50%;
  39. }
  40. 100% {
  41. background-position: 0 50%;
  42. }
  43. }