You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

пре 2 година
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="pages" v-if="value">
  3. <div class="donut"></div>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: '加载组件',
  9. props: {
  10. // v-model绑定的变量
  11. value: {
  12. type: Boolean,
  13. default: false
  14. },
  15. },
  16. }
  17. </script>
  18. <style lang="scss" scoped>
  19. .pages {
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. right: 0;
  24. bottom: 0;
  25. z-index: 999999;
  26. display: flex;
  27. flex-direction: column;
  28. align-items: center;
  29. background: #fff;
  30. .donut {
  31. margin-top: 35vh;
  32. display: inline-block;
  33. border: 10rpx solid rgba(0, 0, 0, 0.1);
  34. border-left-color: #1296db;
  35. border-radius: 50%;
  36. width: 150rpx;
  37. height: 150rpx;
  38. animation: donut-spin 1.2s linear infinite;
  39. }
  40. }
  41. @Keyframes donut-spin {
  42. 0% {
  43. transform: rotate(0deg);
  44. }
  45. 100% {
  46. transform: rotate(360deg);
  47. }
  48. }
  49. </style>