Chatwoot/app/javascript/shared/components/Spinner.vue
Pranav Raj S 2b41e91768 [Enhancement] Fetch previous messages in the conversation (#355)
* Fetch previous messages in the conversation

* Add specs for conversation store

* Fix codeclimate issues

* Exclude specs folder

* Exclude globally

* Fix path in exclude patterns

* Add endPoints spec

* Add snapshots for Spinner

* Add specs for actions
2019-12-11 20:57:06 +05:30

67 lines
1.3 KiB
Vue

<template>
<span class="spinner small"></span>
</template>
<style scoped lang="scss">
@import '~widget/assets/scss/variables';
@mixin color-spinner() {
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
&:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: $space-medium;
height: $space-medium;
margin-top: -$space-one;
margin-left: -$space-one;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
border-top-color: lighten($color-woot, 10%);
animation: spinner 0.9s linear infinite;
}
}
.spinner {
@include color-spinner();
position: relative;
display: inline-block;
width: $space-medium;
height: $space-medium;
padding: $zero $space-medium;
vertical-align: middle;
&.message {
padding: $space-normal;
top: 0;
left: 0;
margin: 0 auto;
margin-top: $space-slab;
background: $color-white;
border-radius: $space-large;
&:before {
margin-top: -$space-slab;
margin-left: -$space-slab;
}
}
&.small {
width: $space-normal;
height: $space-normal;
&:before {
width: $space-normal;
height: $space-normal;
margin-top: -$space-small;
}
}
}
</style>