44 lines
743 B
Vue
44 lines
743 B
Vue
<template>
|
|
<div class="loading-container">
|
|
<div class="blood"></div>
|
|
<div class="blood"></div>
|
|
<div class="blood"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="sass">
|
|
.loading-container
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: 10px
|
|
|
|
.blood
|
|
width: 15px
|
|
height: 15px
|
|
border: 1px solid black
|
|
border-radius: 0% 100% 100% 100%
|
|
transform: rotate(45deg)
|
|
animation: blink 1s infinite
|
|
@media (min-width: 992px)
|
|
width: 20px
|
|
height: 20px
|
|
|
|
.blood
|
|
&:nth-child(1)
|
|
animation-delay: -.2s
|
|
|
|
&:nth-child(2)
|
|
animation-delay: 0.2s
|
|
|
|
&:nth-child(3)
|
|
animation-delay: 0.5s
|
|
|
|
@keyframes blink
|
|
0%
|
|
background-color: transparent
|
|
|
|
50%
|
|
background-color: red
|
|
</style>
|