loading-icon.nvue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案列</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__loading-item">
  7. <u-loading-icon></u-loading-icon>
  8. </view>
  9. </view>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">半圆loading</text>
  13. <view class="u-demo-block__content">
  14. <view class="u-page__loading-item">
  15. <u-loading-icon mode="semicircle"></u-loading-icon>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="u-demo-block">
  20. <text class="u-demo-block__title">圆形loading</text>
  21. <view class="u-demo-block__content">
  22. <view class="u-page__loading-item">
  23. <u-loading-icon mode="circle"></u-loading-icon>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="u-demo-block">
  28. <text class="u-demo-block__title">自定义动画</text>
  29. <view class="u-demo-block__content">
  30. <view class="u-page__loading-item">
  31. <u-loading-icon mode="circle" timingFunction="linear"></u-loading-icon>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="u-demo-block">
  36. <text class="u-demo-block__title">自定义颜色</text>
  37. <view class="u-demo-block__content">
  38. <view class="u-page__loading-item">
  39. <u-loading-icon color="#19be6b"></u-loading-icon>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="u-demo-block">
  44. <text class="u-demo-block__title">自定义文字</text>
  45. <view class="u-demo-block__content">
  46. <view class="u-page__loading-item">
  47. <u-loading-icon
  48. :vertical="true"
  49. text="加载中"
  50. ></u-loading-icon>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. export default {
  58. data() {
  59. return {
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="scss">
  65. .u-page {
  66. &__loading-item {
  67. margin-top: 5px;
  68. }
  69. }
  70. .u-demo-block__content {
  71. flex-direction: row;
  72. flex-wrap: wrap;
  73. align-items: center;
  74. }
  75. </style>