vuestic-ui
Version:
Vue 3 UI Framework
9 lines (8 loc) • 2.14 kB
JavaScript
import { _ as _sfc_main } from "./VaProgressCircle.vue_vue_type_script_setup_true_lang.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ":root,\n:host {\n /* Circle */\n --va-progress-circle-position: relative;\n --va-progress-circle-overflow: hidden;\n /* Circle Wrapper */\n --va-progress-circle-width: 80%;\n --va-progress-circle-height: 80%;\n /* Circle Overlay */\n --va-progress-circle-overlay-transition: all ease 2s;\n /* Circle Info */\n --va-progress-circle-font-size: 0.75rem;\n}\n.va-progress-circle {\n position: var(--va-progress-circle-position);\n overflow: var(--va-progress-circle-overflow);\n font-family: var(--va-font-family);\n}\n.va-progress-circle__wrapper {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n transform: rotate(-90deg);\n width: var(--va-progress-circle-width);\n height: var(--va-progress-circle-height);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.va-progress-circle--indeterminate .va-progress-circle__wrapper {\n animation: va-progress-circle__wrapper--indeterminate 2s linear infinite;\n}\n.va-progress-circle__overlay {\n transition: var(--va-progress-circle-overlay-transition);\n}\n.va-progress-circle--indeterminate .va-progress-circle__overlay {\n animation: va-progress-circle__overlay--indeterminate 2s ease-in-out infinite;\n}\n.va-progress-circle__info {\n font-size: var(--va-progress-circle-font-size);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n@keyframes va-progress-circle__wrapper--indeterminate {\n100% {\n transform: rotate(270deg);\n}\n}\n@keyframes va-progress-circle__overlay--indeterminate {\n0% {\n stroke-dasharray: 1, 125;\n stroke-dashoffset: 0;\n}\n50% {\n stroke-dasharray: 125, 125;\n stroke-dashoffset: -65px;\n}\n100% {\n stroke-dasharray: 125, 125;\n stroke-dashoffset: -125px;\n}\n}";
const _VaProgressCircle = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaProgressCircle as _
};
//# sourceMappingURL=VaProgressCircle.js.map