You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
735 B
Vue
42 lines
735 B
Vue
3 years ago
|
<template>
|
||
|
<div class="box">
|
||
|
<img class="icon" :src="'./sym/throbber.svg'" alt="[animation]"/>
|
||
|
<div class="text">{{text}}</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
3 years ago
|
name: "throbber",
|
||
3 years ago
|
props:{
|
||
|
text: String
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
.box{
|
||
|
position: absolute;
|
||
3 years ago
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
3 years ago
|
height: 8rem;
|
||
|
width: 8rem;
|
||
|
background-color: #1d1d1d;
|
||
3 years ago
|
box-shadow: 6px 6px 10px #111;
|
||
3 years ago
|
border-radius: 2rem;
|
||
|
.icon{
|
||
|
position: absolute;
|
||
|
top: 15%;
|
||
|
left: 25%;
|
||
|
height: 50%;
|
||
|
width: 50%;
|
||
|
}
|
||
|
.text{
|
||
|
position: absolute;
|
||
|
bottom: 1rem;
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
</style>
|