naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
105 lines • 2.96 kB
JavaScript
import { defineComponent, h, toRef } from 'vue';
import { useStyle } from "../../../_mixins/index.mjs";
import NIconSwitchTransition from "../../icon-switch-transition/index.mjs";
import style from "./styles/index.cssr.mjs";
const duration = '1.6s';
const exposedLoadingProps = {
strokeWidth: {
type: Number,
default: 28
},
stroke: {
type: String,
default: undefined
}
};
export default defineComponent({
name: 'BaseLoading',
props: Object.assign({
clsPrefix: {
type: String,
required: true
},
show: {
type: Boolean,
default: true
},
scale: {
type: Number,
default: 1
},
radius: {
type: Number,
default: 100
}
}, exposedLoadingProps),
setup(props) {
useStyle('-base-loading', style, toRef(props, 'clsPrefix'));
},
render() {
const {
clsPrefix,
radius,
strokeWidth,
stroke,
scale
} = this;
const scaledRadius = radius / scale;
return h("div", {
class: `${clsPrefix}-base-loading`,
role: "img",
"aria-label": "loading"
}, h(NIconSwitchTransition, null, {
default: () => this.show ? h("div", {
key: "icon",
class: `${clsPrefix}-base-loading__transition-wrapper`
}, h("div", {
class: `${clsPrefix}-base-loading__container`
}, h("svg", {
class: `${clsPrefix}-base-loading__icon`,
viewBox: `0 0 ${2 * scaledRadius} ${2 * scaledRadius}`,
xmlns: "http://www.w3.org/2000/svg",
style: {
color: stroke
}
}, h("g", null, h("animateTransform", {
attributeName: "transform",
type: "rotate",
values: `0 ${scaledRadius} ${scaledRadius};270 ${scaledRadius} ${scaledRadius}`,
begin: "0s",
dur: duration,
fill: "freeze",
repeatCount: "indefinite"
}), h("circle", {
class: `${clsPrefix}-base-loading__icon`,
fill: "none",
stroke: "currentColor",
"stroke-width": strokeWidth,
"stroke-linecap": "round",
cx: scaledRadius,
cy: scaledRadius,
r: radius - strokeWidth / 2,
"stroke-dasharray": 5.67 * radius,
"stroke-dashoffset": 18.48 * radius
}, h("animateTransform", {
attributeName: "transform",
type: "rotate",
values: `0 ${scaledRadius} ${scaledRadius};135 ${scaledRadius} ${scaledRadius};450 ${scaledRadius} ${scaledRadius}`,
begin: "0s",
dur: duration,
fill: "freeze",
repeatCount: "indefinite"
}), h("animate", {
attributeName: "stroke-dashoffset",
values: `${5.67 * radius};${1.42 * radius};${5.67 * radius}`,
begin: "0s",
dur: duration,
fill: "freeze",
repeatCount: "indefinite"
})))))) : h("div", {
key: "placeholder",
class: `${clsPrefix}-base-loading__placeholder`
}, this.$slots)
}));
}
});