<import-sjs name="{getLoadingColor}" from="./index.sjs" />
<view class="amd-loading {{className ? className : ''}} {{type === 'spin' ? 'amd-loading-spin-container' :'amd-loading-mini-container'}}" 
  a:if="{{_loading}}">
  <view a:if="{{type=== 'spin'}}" class="amd-loading-spin amd-loading-spin-{{theme}}">
    <view class="amd-loading-spin-icon amd-loading-spin-icon-indicator">
      <slot name="indicator" />
    </view>
    <view class="amd-loading-spin-icon amd-loading-spin-icon-{{size}}" style="background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%2224%2024%2048%2048%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20repeatCount%3D%22indefinite%22%20from%3D%220%22%20to%3D%22360%22%20dur%3D%221400ms%22%3E%3C%2FanimateTransform%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22{{getLoadingColor(theme,color)}}%22%20stroke-width%3D%222%22%20transform%3D%22translate%5C\(0%2C0%5C\)%22%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20values%3D%221px%2C%20200px%3B100px%2C%20200px%3B100px%2C%20200px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3Canimate%20attributeName%3D%22stroke-dashoffset%22%20values%3D%220px%3B-15px%3B-125px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);">
    </view>
    <view class="amd-loading-spin-text amd-loading-spin-text-{{theme}}">
      <block a:if="{{text != null}}">
        {{text}}
      </block>
      <block a:else>
        <slot name="text" />
      </block>
    </view>
  </view>
  <view a:else class="amd-loading-mini" style="{{height?'min-height:' + height + ';': ''}}
      height: {{height?height:miniSize}};
      width: {{miniSize}};">
    <view class="amd-loading-mini-item amd-loading-mini-item__1" style="
        {{color ? `background-color: ${color};` : ''}}
        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
      ">.</view>
    <view class="amd-loading-mini-item amd-loading-mini-item__2" style="
        {{color ? `background-color: ${color};` : ''}}
        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
      ">.</view>
    <view class="amd-loading-mini-item amd-loading-mini-item__3" style="
        {{color ? `background-color: ${color};` : ''}}
        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
      ">.</view>
  </view>
</view>