<template>
  <section class="thinkingBar"/>
</template>

<script>
export default {
  name: "thinkingBar",
}
</script>

<style lang="scss" scoped>
.thinkingBar {
  position: relative;
  height: 2px;
  background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  background-size: 100%;
  animation: shrink-and-expand 2s ease-in-out infinite alternate;

  @keyframes shrink-and-expand {
    0%, 100% {
      transform: scaleX(1);
    }
    50% {
      transform: scaleX(0);
    }
  }
}
</style>
