wx-starlock/components/SwitchLoading/SwitchLoading.vue

<template>
  <view>
    <view class="spinner-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
      <view
        v-if="show"
        class="circle-border"
        :style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
      >
      </view>
      <view
        v-else
        class="circle-border-stop"
        :style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
      ></view>
      <view
        class="circle-core"
        :style="{ width: size * 0.75 - 2 + 'rpx', height: size * 0.75 - 2 + 'rpx' }"
      >
        <image
          src="/static/images/icon_lock_transparent.png"
          mode="aspectFill"
          :style="{ width: size * 0.35 + 'rpx', height: size * 0.35 + 'rpx' }"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'SwitchLoading',
    props: {
      size: Number
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
      open() {
        this.show = true
      },
      close() {
        this.show = false
      }
    }
  }
</script>

<style>
  @keyframes spin {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(359deg);
    }
  }

  .spinner-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;

    position: relative;
  }

  .circle-border {
    padding: 3upx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(99, 184, 175);
    background: linear-gradient(0deg, rgba(99, 184, 175, 0.1) 33%, rgba(99, 184, 175, 1) 100%);
    animation: spin 0.8s linear 0s infinite;

    position: absolute;
    z-index: 0;
  }

  .circle-border-stop {
    padding: 3upx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(99, 184, 175);
    position: absolute;
    z-index: 0;
  }

  .circle-core {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>