index.less 972 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .avatar-size(@size) {
  4. width: @size;
  5. height: @size;
  6. line-height: @size;
  7. }
  8. .@{wux-prefix}-skeleton-avatar {
  9. display: inline-block;
  10. vertical-align: top;
  11. background: @skeleton-bg;
  12. .avatar-size(@skeleton-avatar-size-base);
  13. &--small {
  14. .avatar-size(@skeleton-avatar-size-sm);
  15. }
  16. &--large {
  17. .avatar-size(@skeleton-avatar-size-lg);
  18. }
  19. &--circle {
  20. border-radius: 50%;
  21. }
  22. &--rounded {
  23. border-radius: @skeleton-radius;
  24. }
  25. &--square {
  26. border-radius: 0;
  27. }
  28. &--active {
  29. background: linear-gradient(90deg, @skeleton-bg 25%, @skeleton-to-bg 37%, @skeleton-bg 63%);
  30. animation: loading 1.4s ease infinite;
  31. background-size: 400% 100%;
  32. }
  33. }
  34. @keyframes loading {
  35. 0% {
  36. background-position: 100% 50%;
  37. }
  38. 100% {
  39. background-position: 0 50%;
  40. }
  41. }