68 lines
1.3 KiB
Vue
Executable File
68 lines
1.3 KiB
Vue
Executable File
<template>
|
|
<h3>
|
|
</h3>
|
|
<div class="loading">
|
|
<div class="loading__circle loading__circle--color-blue"></div>
|
|
<div class="loading__circle loading__circle--color-red"></div>
|
|
<div class="loading__circle loading__circle--color-yellow"></div>
|
|
<div class="loading__circle loading__circle--color-green"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang=scss scoped>
|
|
.loading {
|
|
position: absolute;
|
|
top:40%;
|
|
left:calc(50% - (2rem*4 + 0.750rem * 3) / 2);
|
|
margin:auto;
|
|
//padding: 0.625rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.loading__circle {
|
|
min-width: 2rem;
|
|
aspect-ratio: 1;
|
|
background-color: lightgrey;
|
|
border-radius: 50%;
|
|
margin: 0 0.375rem;
|
|
animation-name: bump;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.loading__circle--color-blue {
|
|
background-color: #4285f4;
|
|
animation-delay:0;
|
|
|
|
}
|
|
.loading__circle--color-red {
|
|
background-color: #ea4335;
|
|
animation-delay:0.5s;
|
|
}
|
|
.loading__circle--color-yellow {
|
|
background-color: #fbbc05;
|
|
animation-delay:1s;
|
|
|
|
}
|
|
.loading__circle--color-green {
|
|
background-color: #34a853;
|
|
animation-delay:1.5s;
|
|
}
|
|
|
|
@keyframes bump {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(1.4);
|
|
}
|
|
50%{
|
|
transform: scale(1);
|
|
}
|
|
100%{
|
|
transform:scale(1);
|
|
}
|
|
}
|
|
</style> |