oa-load-progress.vue 693 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <!--进度条加载-->
  3. <view
  4. class="load-progress"
  5. :class="progress != 0 ? 'show' : 'hide'"
  6. :style="[{ top: height + 'px' }]"
  7. >
  8. <view
  9. class="load-progress-bar bg-base-color"
  10. :style="[
  11. { transform: 'translate3d(-' + (100 - progress) + '%, 0px, 0px)' }
  12. ]"
  13. ></view>
  14. <view class="load-progress-spinner text-base-color"></view>
  15. </view>
  16. </template>
  17. <script>
  18. /**
  19. * @des 进度条加载
  20. *
  21. * @author hjp1011 21931118@qq.com
  22. * @date 2020-03-24 18:43
  23. * @copyright 2019
  24. */
  25. export default {
  26. name: 'oa-loading',
  27. props: {
  28. progress: {
  29. type: Number,
  30. default: 0
  31. },
  32. height: {
  33. type: Number,
  34. default: 0
  35. }
  36. }
  37. };
  38. </script>
  39. <style scoped></style>