{"version":3,"sources":["webpack://../components/Loading/src/Loading.vue"],"names":[],"mappings":"AA0CA,MACA,uBAAA,CACA,0BAAA,CACA,4CAAA,CACA,eACA,CAEA,mBACA,YAAA,CACA,sBACA,CAEA,mBACA,2DAWA,CATA,qCACA,6BAAA,CACA,8BACA,CAEA,qCACA,gCAAA,CACA,iCACA,CAGA,mBACA,uBAAA,CACA,gEAAA,CACA,mBAAA,CACA,8BASA,CAPA,qCACA,gBACA,CAEA,qCACA,gBACA,CAGA,6BACA,GAAA,wBAAA,CACA,CAEA,6BACA,GACA,+BACA,CAEA,IACA,wBAAA,CACA,uCACA,CAEA,GACA,wBAAA,CACA,+BACA,CACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.Loading\">\n\t\t<svg\n\t\t\t:class=\"[\n\t\t\t\t$s.Spinner,\n\t\t\t\t$s[`size_${size}`],\n\t\t\t]\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\t:class=\"[\n\t\t\t\t\t$s.Circle,\n\t\t\t\t\t$s[`size_${size}`],\n\t\t\t\t]\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tcx=\"8\"\n\t\t\t\tcy=\"8\"\n\t\t\t\tr=\"7\"\n\t\t\t/>\n\t\t</svg>\n\t</div>\n</template>\n\n<script>\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tprops: {\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator: (size) => ['normal', 'large'].includes(size),\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n:root {\n\t--spinner-diameter: 16px;\n\t--spinner-lg-diameter: 64px;\n\t--offset: calc(3.145 * var(--spinner-diameter));\n\t--duration: 1.5s;\n}\n\n.Loading {\n\tdisplay: flex;\n\tjustify-content: center;\n}\n\n.Spinner {\n\tanimation: rotate var(--duration) linear infinite;\n\n\t&.size_normal {\n\t\twidth: var(--spinner-diameter);\n\t\theight: var(--spinner-diameter);\n\t}\n\n\t&.size_large {\n\t\twidth: var(--spinner-lg-diameter);\n\t\theight: var(--spinner-lg-diameter);\n\t}\n}\n\n.Circle {\n\ttransform-origin: center;\n\tanimation: circle-line var(--duration) ease-in-out infinite;\n\tstroke: currentColor;\n\tstroke-dasharray: var(--offset);\n\n\t&.size_normal {\n\t\tstroke-width: 2px;\n\t}\n\n\t&.size_large {\n\t\tstroke-width: 1px;\n\t}\n}\n\n@keyframes rotate {\n\tto { transform: rotate(270deg); }\n}\n\n@keyframes circle-line {\n\t0% {\n\t\tstroke-dashoffset: var(--offset);\n\t}\n\n\t50% {\n\t\ttransform: rotate(135deg);\n\t\tstroke-dashoffset: calc(var(--offset) / 3);\n\t}\n\n\t100% {\n\t\ttransform: rotate(450deg);\n\t\tstroke-dashoffset: var(--offset);\n\t}\n}\n</style>\n"]}