mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-16 01:26:44 +00:00
13659d036f
* ensure that eslint runs on all frontend code * remove tslint from `design-system` * enable prettier and eslint-prettier for `design-system` * Delete tslint.json * use a single editorconfig for the repo * enable prettier for all code in `design-system` * more linting fixes on design-system * ignore coverage for git and prettier * lintfix on editor-ui
77 lines
1.4 KiB
Vue
77 lines
1.4 KiB
Vue
<template>
|
|
<span class="n8n-spinner">
|
|
<div v-if="type === 'ring'" class="lds-ring">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<n8n-icon v-else icon="spinner" :size="size" spin />
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import N8nIcon from '../N8nIcon';
|
|
|
|
import Vue from 'vue';
|
|
|
|
export default Vue.extend({
|
|
name: 'n8n-spinner',
|
|
components: {
|
|
N8nIcon,
|
|
},
|
|
props: {
|
|
size: {
|
|
type: String,
|
|
validator(value: string): boolean {
|
|
return ['small', 'medium', 'large'].includes(value);
|
|
},
|
|
},
|
|
type: {
|
|
type: String,
|
|
validator(value: string): boolean {
|
|
return ['dots', 'ring'].includes(value);
|
|
},
|
|
default: 'dots',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.lds-ring {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.lds-ring div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid var(--color-foreground-xlight);
|
|
border-radius: 50%;
|
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: var(--color-primary) transparent transparent transparent;
|
|
}
|
|
.lds-ring div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.lds-ring div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.lds-ring div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes lds-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|