{"version":3,"file":"ClassicSpinner-lNq7TnmD.mjs","names":[],"sources":["../src/components/misc/ClassicSpinner.vue","../src/components/misc/ClassicSpinner.vue"],"sourcesContent":["<template>\n  <div\n    class=\"octopus-spinner\"\n    :style=\"style\"\n  >\n    <div v-for=\"index of 12\" :key=\"index\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n//Props \nconst props = defineProps({\n  small: { default: false, type: Boolean },\n  color: { default: undefined, type: String }\n})\n\nconst style = computed(() => ({\n  '--size-spinner': props.small ? '1.5rem' : '3rem',\n  '--color-spinner': props.color === undefined ? '#000000' : props.color\n}));\n</script>\n\n<style lang=\"scss\">\n.octopus-app .octopus-spinner {\n\n  --size-spinner: 3rem;\n  --size-spinner-section: calc(var(--size-spinner) / 20);\n  --half-size-spinner: calc(var(--size-spinner) / 2);\n  --color-spinner: #000000;\n  \n  color: var(--color-spinner);\n  display: inline-block;\n  position: relative;\n  width: var(--size-spinner);\n  height: var(--size-spinner);\n\n  div {\n    transform-origin: var(--half-size-spinner) var(--half-size-spinner);\n    animation: octopus-spinner 1.2s linear infinite;\n  }\n  div:after {\n    content: \" \";\n    display: block;\n    position: absolute;\n    top: 3px;\n    left: calc(var(--half-size-spinner) - calc(var(--size-spinner-section) / 2));\n    width: var(--size-spinner-section);\n    height: calc(var(--half-size-spinner) / 3);\n    border-radius: 20%;\n    background: currentColor;\n  }\n  div:nth-child(1) {\n    transform: rotate(0deg);\n    animation-delay: -1.1s;\n  }\n  div:nth-child(2) {\n    transform: rotate(30deg);\n    animation-delay: -1s;\n  }\n  div:nth-child(3) {\n    transform: rotate(60deg);\n    animation-delay: -0.9s;\n  }\n  div:nth-child(4) {\n    transform: rotate(90deg);\n    animation-delay: -0.8s;\n  }\n  div:nth-child(5) {\n    transform: rotate(120deg);\n    animation-delay: -0.7s;\n  }\n  div:nth-child(6) {\n    transform: rotate(150deg);\n    animation-delay: -0.6s;\n  }\n  div:nth-child(7) {\n    transform: rotate(180deg);\n    animation-delay: -0.5s;\n  }\n  div:nth-child(8) {\n    transform: rotate(210deg);\n    animation-delay: -0.4s;\n  }\n  div:nth-child(9) {\n    transform: rotate(240deg);\n    animation-delay: -0.3s;\n  }\n  div:nth-child(10) {\n    transform: rotate(270deg);\n    animation-delay: -0.2s;\n  }\n  div:nth-child(11) {\n    transform: rotate(300deg);\n    animation-delay: -0.1s;\n  }\n  div:nth-child(12) {\n    transform: rotate(330deg);\n    animation-delay: 0s;\n  }\n\n  @keyframes octopus-spinner {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"octopus-spinner\"\n    :style=\"style\"\n  >\n    <div v-for=\"index of 12\" :key=\"index\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n//Props \nconst props = defineProps({\n  small: { default: false, type: Boolean },\n  color: { default: undefined, type: String }\n})\n\nconst style = computed(() => ({\n  '--size-spinner': props.small ? '1.5rem' : '3rem',\n  '--color-spinner': props.color === undefined ? '#000000' : props.color\n}));\n</script>\n\n<style lang=\"scss\">\n.octopus-app .octopus-spinner {\n\n  --size-spinner: 3rem;\n  --size-spinner-section: calc(var(--size-spinner) / 20);\n  --half-size-spinner: calc(var(--size-spinner) / 2);\n  --color-spinner: #000000;\n  \n  color: var(--color-spinner);\n  display: inline-block;\n  position: relative;\n  width: var(--size-spinner);\n  height: var(--size-spinner);\n\n  div {\n    transform-origin: var(--half-size-spinner) var(--half-size-spinner);\n    animation: octopus-spinner 1.2s linear infinite;\n  }\n  div:after {\n    content: \" \";\n    display: block;\n    position: absolute;\n    top: 3px;\n    left: calc(var(--half-size-spinner) - calc(var(--size-spinner-section) / 2));\n    width: var(--size-spinner-section);\n    height: calc(var(--half-size-spinner) / 3);\n    border-radius: 20%;\n    background: currentColor;\n  }\n  div:nth-child(1) {\n    transform: rotate(0deg);\n    animation-delay: -1.1s;\n  }\n  div:nth-child(2) {\n    transform: rotate(30deg);\n    animation-delay: -1s;\n  }\n  div:nth-child(3) {\n    transform: rotate(60deg);\n    animation-delay: -0.9s;\n  }\n  div:nth-child(4) {\n    transform: rotate(90deg);\n    animation-delay: -0.8s;\n  }\n  div:nth-child(5) {\n    transform: rotate(120deg);\n    animation-delay: -0.7s;\n  }\n  div:nth-child(6) {\n    transform: rotate(150deg);\n    animation-delay: -0.6s;\n  }\n  div:nth-child(7) {\n    transform: rotate(180deg);\n    animation-delay: -0.5s;\n  }\n  div:nth-child(8) {\n    transform: rotate(210deg);\n    animation-delay: -0.4s;\n  }\n  div:nth-child(9) {\n    transform: rotate(240deg);\n    animation-delay: -0.3s;\n  }\n  div:nth-child(10) {\n    transform: rotate(270deg);\n    animation-delay: -0.2s;\n  }\n  div:nth-child(11) {\n    transform: rotate(300deg);\n    animation-delay: -0.1s;\n  }\n  div:nth-child(12) {\n    transform: rotate(330deg);\n    animation-delay: 0s;\n  }\n\n  @keyframes octopus-spinner {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;;;UAKA,gBAAgB;IAC5B,kBAAkB,MAAM,QAAQ,WAAW;IAC3C,mBAAmB,MAAM,UAAU,KAAA,IAAY,YAAY,MAAM;GACnE,EAAA;;;;;;;;;;;;;qBCpBE,mBAKM,OAAA;EAJJ,OAAM;EACL,OAAK,eAAE,OAAA,KAAK;mBAEb,mBAAwC,UAAA,MAAA,WAAnB,KAAT,UAAK;SAAjB,mBAAwC,OAAA,EAAd,KAAK,MAAK,CAAA"}