loading.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <view>
  3. <view v-if="isShowLoading" class="iconfont loading">&#xe84b;</view>
  4. <!-- <image style="position: fixed;z-index: 10000222;width: 300rpx;height: 160rpx;top: 50%;margin-left: -150rpx;left: 50%;margin-left: -80rpx;" src="/static/loadinglogo.gif"></image> -->
  5. <view class="loading-text" v-if="text != ''">
  6. <view>{{text}}<text class="dotting"></text></view>
  7. </view>
  8. <view
  9. v-if="layer"
  10. class="layer-box"
  11. :style="'background-color:'+color"
  12. ></view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. name: "loading",
  18. props:{
  19. text:{
  20. type: String,
  21. default: ""
  22. },
  23. isShowLoading: {
  24. type:Boolean,
  25. default:true
  26. },
  27. layer:{
  28. type:Boolean,
  29. default:false
  30. },
  31. color:{
  32. type:String,
  33. default: "rgba(255,255,255,0.1)"
  34. }
  35. },
  36. mounted() {
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. :root .dotting { margin-right: 8px; }
  42. .loading {
  43. font-size: 50rpx;
  44. position: fixed;
  45. left: 47%;
  46. top: 40%;
  47. z-index: 100002;
  48. background-size: 100%;
  49. transform: translateX(-47%);
  50. transform: translateY(-40%);
  51. animation: aaa-spin 2s infinite linear;
  52. display: inline-block;
  53. }
  54. .loading-text {
  55. width: 100%;
  56. font-size: 29rpx;
  57. text-align: center;
  58. position: fixed;
  59. top: 47%;
  60. color: #333;
  61. z-index: 100002;
  62. background-size: 100%;
  63. transform: translateY(-40%);
  64. view {
  65. width: 80%;
  66. margin: 0 auto;
  67. .dotting {
  68. display: inline-block; min-width: 2px; min-height: 2px;
  69. animation: dot 4s infinite step-start both;
  70. font-size: 29rpx;
  71. }
  72. }
  73. }
  74. .layer-box{
  75. width: 100%;
  76. height: 100%;
  77. position: fixed;
  78. top: 0;
  79. left: 0;
  80. background-color: rgba(255,255,255,0.1);
  81. z-index: 100001;
  82. }
  83. @keyframes aaa-spin {
  84. 0% {
  85. transform: rotate(0deg)
  86. }
  87. 100% {
  88. transform: rotate(359deg)
  89. }
  90. }
  91. @keyframes dot {
  92. 25% { box-shadow: none; }
  93. 50% { box-shadow: 2px 0 #666; }
  94. 75% { box-shadow: 2px 0 #666, 6px 0 #666; }
  95. }
  96. </style>