29 lines
543 B
Vue
29 lines
543 B
Vue
<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>
|