<template>
  <div class="circle-container">
    <div class="circle-one"></div>
    <div class="circle-three"></div>
    <div class="circle-two"></div>
  </div>
</template>

<script>
export default {
      name:'circle'
};
</script>

<style>
circle-container {
    position: absolute;
}

.circle-one,
.circle-two,
.circle-three,
.circle-four {
    width: 0px;
    height: 0px;
    background-color: transparent;
    border: 3px solid blue;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.circle-one {
    animation: transition-circle 2s infinite
}

.circle-two {
    animation: transition-circle 2s infinite .5s
}

.circle-three {
    animation: transition-circle 2s infinite 1s
}

.circle-three {
    animation: transition-circle 2s infinite 1.6s
}

@keyframes transition-circle {
    0% {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    100% {
        width: 35px;
        height: 35px;
        opacity: 0;
    }
}
</style>