58 lines
884 B
Vue
58 lines
884 B
Vue
<template>
|
|
<div class="bouncing-squares-loader">
|
|
<div class="square"></div>
|
|
<div class="square"></div>
|
|
<div class="square"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// From Uiverse.io by mobinkakei (modified)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bouncing-squares-loader {
|
|
width: 40px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.square {
|
|
width: 3px;
|
|
height: 3px;
|
|
position: absolute;
|
|
background-color: var(--claude-text-tertiary);
|
|
left: 15%;
|
|
transform-origin: 50%;
|
|
animation: bounce-square .5s alternate infinite ease;
|
|
}
|
|
|
|
@keyframes bounce-square {
|
|
0% {
|
|
top: 20px;
|
|
height: 2px;
|
|
transform: scaleX(1.7);
|
|
}
|
|
|
|
40% {
|
|
height: 3px;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
100% {
|
|
top: 0%;
|
|
}
|
|
}
|
|
|
|
.square:nth-child(2) {
|
|
left: 45%;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.square:nth-child(3) {
|
|
left: auto;
|
|
right: 15%;
|
|
animation-delay: .3s;
|
|
}
|
|
</style>
|