tui-skeleton.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .tui-skeleton-cmomon {
  2. position: absolute;
  3. z-index: 99999;
  4. overflow: hidden;
  5. }
  6. .tui-skeleton-box {
  7. left: 0;
  8. top: 0;
  9. }
  10. .tui-loading {
  11. display: inline-block;
  12. vertical-align: middle;
  13. width: 40rpx;
  14. height: 40rpx;
  15. background: 0 0;
  16. border-radius: 50%;
  17. border: 2px solid;
  18. -webkit-animation: tui-rotate 0.7s linear infinite;
  19. animation: tui-rotate 0.7s linear infinite;
  20. position: fixed;
  21. z-index: 999999;
  22. left: 50%;
  23. top: 50%;
  24. margin-left: -20rpx;
  25. margin-top: -20rpx;
  26. }
  27. .tui-loading-1 {
  28. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
  29. }
  30. .tui-loading-2 {
  31. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
  32. }
  33. .tui-loading-3 {
  34. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #fff;
  35. }
  36. .tui-loading-4 {
  37. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #35b06a;
  38. }
  39. .tui-loading-5 {
  40. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fc872d;
  41. }
  42. .tui-loading-6 {
  43. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #eb0909;
  44. }
  45. .tui-loading-7 {
  46. border-color: #5677fc transparent #5677fc transparent;
  47. }
  48. .tui-loading-8 {
  49. border-color: #35b06a transparent #35b06a transparent;
  50. }
  51. .tui-loading-9 {
  52. border-color: #fc872d transparent #fc872d transparent;
  53. }
  54. .tui-loading-10 {
  55. border-color: #eb0909 transparent #eb0909 transparent;
  56. }
  57. @-webkit-keyframes tui-rotate {
  58. 0% {
  59. -webkit-transform: rotate(0);
  60. transform: rotate(0);
  61. }
  62. 100% {
  63. -webkit-transform: rotate(360deg);
  64. transform: rotate(360deg);
  65. }
  66. }
  67. @keyframes tui-rotate {
  68. 0% {
  69. -webkit-transform: rotate(0);
  70. transform: rotate(0);
  71. }
  72. 100% {
  73. -webkit-transform: rotate(360deg);
  74. transform: rotate(360deg);
  75. }
  76. }