<script setup lang="ts">

</script>

<template>
  <view class="container-animation">
    <view class="part one"></view>
    <view class="part two"></view>
    <view class="part three"></view>
    <view class="part four"></view>
  </view>
</template>

<style scoped lang="scss">

  $border-width: 10px;
  $border-color: #333;

.container-animation {
  position: relative;
  animation: rotate 2s linear infinite;
}
.part {
  position: absolute;
  height: 30px;
  width: 30px;
  box-sizing: border-box;
}
.one {
  top: -30px;
  left: -30px;
  border-radius: 100% 0 0 0;
  animation: animato1 1s linear 1s alternate infinite;
  border-top: $border-width solid $border-color;
  border-left: $border-width solid $border-color;
}
.two {
  top: -30px;
  border-radius: 0 100% 0 0;
  animation: animato2 1s linear alternate infinite;
  border-top: $border-width solid $border-color;
  border-right: $border-width solid $border-color;
}
.three {
  left: -30px;
  border-radius: 0 0 0 100%;
  animation: animato3 1s linear alternate infinite;
  border-bottom: $border-width solid $border-color;
  border-left: $border-width solid $border-color;
}
.four {
  top: 0px;
  left: 0px;
  border-radius: 0 0 100% 0;
  animation: animato4 1s linear 1s alternate infinite;
  border-bottom: $border-width solid $border-color;
  border-right: $border-width solid $border-color;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
    background-color: orange;
  }
}
@keyframes animato1 {
  to {
    width: 20rpx; height: 20rpx; top: -20rpx; left: -20rpx;
  }
}
@keyframes animato2 {
  to {
    width: 20rpx; height: 20rpx; top: -20rpx;
  }
}
@keyframes animato3 {
  to {
    width: 20rpx; height: 20rpx; left: -20rpx;
  }
}
@keyframes animato4 {
  to {
    width: 20rpx; height: 20rpx;
  }
}

</style>