index.wxss 895 B

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