feat(loading): add circle

varletjs · Jan 18, 2021 · ee1f020 · ee1f020
1 parent 25e9ca6
commit ee1f020
Show file tree

Hide file tree

Showing 4 changed files with 427 additions and 365 deletions.
diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue
@@ -1,5 +1,19 @@
 <template>
 	<div class="var--box var-loading">
+		<div class="var-loading__circle" v-if="type === 'circle'">
+			<span
+				class="var-loading__circle-block"
+				:style="{
+					width: radius * 2 + 'px',
+					height: radius * 2 + 'px',
+				}"
+			>
+				<svg viewBox="25 25 50 50">
+					<circle cx="50" cy="50" r="20" fill="none"></circle>
+				</svg>
+			</span>
+		</div>
+
 		<div :class="`var-loading__wave var-loading__wave-${size}`" v-if="type === 'wave'">
 			<div :style="{ backgroundColor: color }" :class="`var-loading__wave-item var-loading__wave-item-${size}`"></div>
 			<div :style="{ backgroundColor: color }" :class="`var-loading__wave-item var-loading__wave-item-${size}`"></div>

diff --git a/packages/varlet-ui/src/loading/example/index.vue b/packages/varlet-ui/src/loading/example/index.vue
@@ -3,6 +3,7 @@
 		<div class="loading-demo__type">
 			<app-type>Type</app-type>
 			<div class="loading-demo__type-block">
+				<var-loading type="circle" />
 				<var-loading type="cube" />
 				<var-loading type="wave" />
 				<var-loading type="rect" />
@@ -12,6 +13,7 @@
 		<div class="loading-demo__size">
 			<app-type>Size</app-type>
 			<div class="loading-demo__size-block">
+				<var-loading type="circle" radius="12" />
 				<var-loading type="cube" size="small" />
 				<var-loading type="wave" size="small" />
 				<var-loading type="rect" size="small" />