loading.wxss 859 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. /* templates/loading/loading.wxss */
  2. .loading-box {
  3. position: fixed;
  4. top: 0%;
  5. left: 0%;
  6. width: 100%;
  7. height: 100%;
  8. z-index: 999;
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. }
  13. .loading-box-item {
  14. position: absolute;
  15. top: 50%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. }
  19. .loading-box-item-1 {
  20. width: 258rpx;
  21. height: 258rpx;
  22. }
  23. .loading-box-item-2 {
  24. width: 42rpx;
  25. height: 234rpx;
  26. animation: loading-pencil .6s infinite ease-in-out;
  27. }
  28. .loading-box-item-3 {
  29. width: 76rpx;
  30. height: 28rpx;
  31. transform: translate(-50%, 350%);
  32. animation: loading-circle .6s infinite ease-in-out;
  33. }
  34. @keyframes loading-circle {
  35. 0%, 100% {
  36. opacity: 1;
  37. }
  38. 50% {
  39. opacity: .5;
  40. }
  41. }
  42. @keyframes loading-pencil {
  43. 0%, 100% {
  44. transform: translate(-50%, -50%);
  45. }
  46. 50% {
  47. transform: translate(-50%, -70%);
  48. }
  49. }