wxlitian/miniprogram/miniprogram_npm/tdesign-miniprogram/loading/loading.wxml

<wxs src="../common/utils.wxs" module="utils" />
<view class="{{prefix}}-class">
  <view
    wx:if="{{theme === 'bar' && theme !== 'error'}}"
    style="{{progress >= 0 ? 'width:' + progress + '%' : ''}}"
    class="{{prefix}}-class-indicator {{classPrefix}}__bar {{classPrefix}}__bar--{{progress < 0 ? 'animation' : progress < 100 ? 'static': ''}} {{progress >= 100 || !loading ? classPrefix + '__bar--loaded' : ''}}"
  ></view>
  <view class="{{classPrefix}} {{classPrefix + '--' + layout}}" style="{{show ? '' : 'display:none'}}" wx:else>
    <view
      wx:if="{{ theme !== 'error' }}"
      class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}"
      style="width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}; {{inheritColor ? 'color: inherit' : ''}} {{indicator ? '' : 'display:none'}}; {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
    >
      <view
        wx:if="{{ theme === 'spinner' }}"
        wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"
        wx:key="index"
        class="{{classPrefix}}__dot"
      />
      <view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular" />
      <block wx:if="{{ theme === 'dots' }}">
        <view
          class="{{classPrefix}}__dot"
          style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + 0 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
        ></view>
        <view
          class="{{classPrefix}}__dot"
          style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 1 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
        ></view>
        <view
          class="{{classPrefix}}__dot"
          style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 2 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
        ></view>
      </block>
    </view>
    <view class="{{prefix}}-class-text">
      <view wx:if="{{theme === 'error'}}">
        <span>加载失败</span>
        <span class="{{classPrefix}}__refresh-btn" bind:tap="refreshPage">刷新</span>
      </view>
      <view class="{{classPrefix}}__text" wx:if="{{text}}">
        <text wx:if="{{text !== 'slot'}}"> {{text}} </text>
        <slot name="text" />
      </view>
    </view>
  </view>
</view>