diff --git a/examples/router/routes.js b/examples/router/routes.js
index 861e52a..d65456d 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -87,6 +87,12 @@ const _components = [
         meta: { title: 'Popup 弹出框' },
         component: () => import('@/views/docs/component/popup.md'),
       },
+      {
+        path: 'loading',
+        name: 'loading',
+        meta: { title: 'Loading 加载' },
+        component: () => import('@/views/docs/component/loading.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/loading.md b/examples/views/docs/component/loading.md
new file mode 100644
index 0000000..8e440a6
--- /dev/null
+++ b/examples/views/docs/component/loading.md
@@ -0,0 +1,33 @@
+# Loading 加载
+
+说明
+
+## 基础用法
+
+说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div>
+    <zui-loading></zui-loading>
+    <zui-loading color="red"></zui-loading>
+    <zui-loading color="deepskyblue" type="loading"></zui-loading>
+    <zui-loading>加载中...</zui-loading>
+    <zui-loading vertical>加载中...</zui-loading>
+    <zui-loading vertical size="3rem" text-size="1rem">加载中...</zui-loading>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/button/index.css b/packages/button/index.css
index 4f9bdc6..13cf523 100644
--- a/packages/button/index.css
+++ b/packages/button/index.css
@@ -2,8 +2,8 @@
   color: #323233;
   background-color: #fff;
   border: 1px solid #ebedf0;
-  padding: 5px 15px;
-  font-size: 14px;
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
   cursor: pointer;
   transition: background-color 300ms;
   display: flex;
@@ -12,13 +12,13 @@
 }
 
 .zui-button.sm {
-  padding: 2px 4px;
-  font-size: 10px;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.625rem;
 }
 
 .zui-button.lg {
-  padding: 10px 20px;
-  font-size: 18px;
+  padding: 0.625rem 1.25rem;
+  font-size: 1.125rem;
 }
 
 .zui-button:active {
@@ -49,7 +49,7 @@
 }
 
 .zui-button.link {
-  padding: 5px 15px;
+  padding: 0.25rem 1rem;
   background: inherit;
   border: inherit;
   color: #FCD404;
diff --git a/packages/button/index.vue b/packages/button/index.vue
index bd4cd76..b840d0e 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -30,11 +30,11 @@ export default {
     },
     borderRadius: function() {
       if (this.round) {
-        return '20px';
+        return '1.25rem';
       } else if (this.square) {
         return '0';
       } else {
-        return '4px';
+        return '0.25rem';
       }
     },
     classRender: function() {
diff --git a/packages/cell/index.css b/packages/cell/index.css
index 85db941..565b8b6 100644
--- a/packages/cell/index.css
+++ b/packages/cell/index.css
@@ -5,10 +5,10 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   overflow: hidden;
   color: #323233;
-  font-size: 14px;
+  font-size: 0.875rem;
   background-color: #fff;
 }
 
@@ -23,18 +23,18 @@
 .zui-cell__left-icon {
   display: flex;
   align-items: center;
-  margin-right: 5px;
+  margin-right: 0.375rem;
 }
 
 .zui-cell__right-icon {
   display: flex;
   align-items: center;
-  margin-left: 5px;
+  margin-left: 0.375rem;
 }
 
 .zui-cell__left-icon, .zui-cell__right-icon {
   min-width: 1em;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .zui-cell:not(:last-child)::after {
@@ -44,7 +44,7 @@
   pointer-events: none;
   right: 0;
   bottom: 0;
-  left: 16px;
+  left: 1rem;
   border-bottom: 1px solid #ebedf0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
@@ -78,8 +78,7 @@
 }
 
 .zui-cell__label {
-  margin-top: 3px;
+  padding-top: 0.25rem;
   color: #969799;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 0.75rem;
 }
diff --git a/packages/checkbox/index.css b/packages/checkbox/index.css
index 8b1075f..6863106 100644
--- a/packages/checkbox/index.css
+++ b/packages/checkbox/index.css
@@ -9,7 +9,7 @@
 }
 
 .zui-checkbox .zui-checkbox__icon .zui-icon {
-  font-size: 24px;
+  font-size: 1.5rem;
   color: #a6a6a6;
   transition: color 300ms;
   cursor: pointer;
@@ -20,5 +20,5 @@
 }
 
 .zui-checkbox .zui-checkbox-label {
-  padding-left: 10px;
+  padding-left: 0.625rem;
 }
\ No newline at end of file
diff --git a/packages/icon/index.css b/packages/icon/index.css
index 742a8ce..c8dd050 100644
--- a/packages/icon/index.css
+++ b/packages/icon/index.css
@@ -14,17 +14,17 @@
   top: 0;
   right: 0;
   box-sizing: border-box;
-  min-width: 16px;
-  padding: 0 3px;
+  min-width: 1rem;
+  padding: 0 0.125rem;
   color: #fff;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-  line-height: 14px;
+  line-height: 0.875rem;
   text-align: center;
   background-color: #ee0a24;
   border: 1px solid #fff;
-  border-radius: 16px;
+  border-radius: 1rem;
   -webkit-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
   -webkit-transform-origin: 100%;
@@ -32,7 +32,7 @@
 }
 
 .zui-info.dot {
-  height: 14px;
-  width: 14px;
-  min-width: 14px !important;
+  height: 0.875rem;
+  width: 0.875rem;
+  min-width: 0.875rem !important;
 }
\ No newline at end of file
diff --git a/packages/loading/index.css b/packages/loading/index.css
new file mode 100644
index 0000000..ce3512a
--- /dev/null
+++ b/packages/loading/index.css
@@ -0,0 +1,151 @@
+.zui-loading {
+  position: relative;
+  color: #c8c9cc;
+  font-size: 0;
+  vertical-align: middle;
+}
+.zui-loading__spinner {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  max-width: 100%;
+  height: 30px;
+  max-height: 100%;
+  vertical-align: middle;
+  animation: zui-rotate 0.8s linear infinite;
+}
+.zui-loading__spinner--spinner {
+  animation-timing-function: steps(12);
+}
+.zui-loading__spinner--spinner i {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.zui-loading__spinner--spinner i::before {
+  display: block;
+  width: 2px;
+  height: 25%;
+  margin: 0 auto;
+  background-color: currentColor;
+  border-radius: 40%;
+  content: ' ';
+}
+.zui-loading__spinner--circular {
+  animation-duration: 2s;
+}
+.zui-loading__circular {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zui-loading__circular circle {
+  animation: zui-circular 1.5s ease-in-out infinite;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.zui-loading__text {
+  display: inline-block;
+  margin-left: 8px;
+  color: #969799;
+  font-size: 14px;
+  vertical-align: middle;
+}
+.zui-loading--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.zui-loading--vertical .zui-loading__text {
+  margin: 8px 0 0;
+}
+
+@keyframes zui-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}
+
+@keyframes zui-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(1) {
+  transform: rotate(30deg);
+  opacity: 1;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(2) {
+  transform: rotate(60deg);
+  opacity: 0.9375;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(3) {
+  transform: rotate(90deg);
+  opacity: 0.875;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(4) {
+  transform: rotate(120deg);
+  opacity: 0.8125;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(5) {
+  transform: rotate(150deg);
+  opacity: 0.75;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(6) {
+  transform: rotate(180deg);
+  opacity: 0.6875;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(7) {
+  transform: rotate(210deg);
+  opacity: 0.625;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(8) {
+  transform: rotate(240deg);
+  opacity: 0.5625;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(9) {
+  transform: rotate(270deg);
+  opacity: 0.5;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(10) {
+  transform: rotate(300deg);
+  opacity: 0.4375;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(11) {
+  transform: rotate(330deg);
+  opacity: 0.375;
+}
+
+.zui-loading__spinner--spinner i:nth-of-type(12) {
+  transform: rotate(360deg);
+  opacity: 0.3125;
+}
\ No newline at end of file
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
new file mode 100644
index 0000000..b8a0e0d
--- /dev/null
+++ b/packages/loading/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div :class="classRender">
+    <span :class="spanClassRender" :style="spanStyleRender">
+      <template v-if="showSpinner">
+        <i v-for="i in 12" :key="i"></i>
+      </template>
+      <svg v-else class="zui-loading__circular" viewBox="25 25 50 50" :style="spanStyleRender">
+        <circle cx="50" cy="50" r="20" fill="none" />
+      </svg>
+    </span>
+    <template v-if="$slots.default">
+      <span class="zui-loading__text" :style="textStyleRender">
+        <slot></slot>
+      </span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: {
+    color: String,
+    size: {
+      type: [Number, String],
+      default: '2rem'
+    },
+    vertical: Boolean,
+    textSize: [Number, String],
+    type: {
+      type: String,
+      default: 'circular',
+    },
+  },
+  computed: {
+    classRender: function() {
+      return {
+        'zui-loading': true,
+        ['zui-loading--' + this.type]: this.type,
+        'zui-loading--vertical': this.vertical,
+      };
+    },
+    spanClassRender: function() {
+      return {
+        'zui-loading__spinner': true,
+        ['zui-loading__spinner--' + this.type]: this.type,
+      };
+    },
+    spanStyleRender: function() {
+      var style = { color: this.color };
+      if (this.size) {
+        var iconSize = typeof this.size == 'number' ? this.size + 'px' : this.size;
+        style.width = iconSize;
+        style.height = iconSize;
+      }
+      return style;
+    },
+    textStyleRender: function() {
+      var textSize = typeof this.textSize == 'number' ? this.textSize + 'px' : this.textSize;
+      return {
+        fontSize: textSize
+      };
+    },
+    showSpinner: function() {
+      return this.type == 'spinner';
+    }
+  }
+};
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
diff --git a/packages/popup/index.css b/packages/popup/index.css
index 25d6a36..04d59d1 100644
--- a/packages/popup/index.css
+++ b/packages/popup/index.css
@@ -40,10 +40,10 @@
 }
 .zui-popup.inner-popup .zui-popup-box {
   background-color: #fff;
-  border-radius: 4px 4px 0 0;
+  border-radius: 0.25rem 0.25rem 0 0;
 }
 .zui-popup.large-radius.inner-popup .zui-popup-box {
-  border-radius: 20px 20px 0 0;
+  border-radius: 1.25rem 1.25rem 0 0;
 }
 .zui-popup-mask {
   width: 100%;
@@ -202,11 +202,11 @@
 @-moz-keyframes fly-in {
   0% {
     opacity: 0.5;
-    transform: scale(0.5) translate3d(0, 50px, 0);
+    transform: scale(0.5) translate3d(0, 3.125rem, 0);
   }
   45% {
     opacity: 1;
-    transform: scale(1.05) translate3d(0, -50px, 0);
+    transform: scale(1.05) translate3d(0, -3.125rem, 0);
   }
   100% {
     transform: scale(1) translate3d(0, 0, 0);
@@ -215,11 +215,11 @@
 @-webkit-keyframes fly-in {
   0% {
     opacity: 0.5;
-    transform: scale(0.5) translate3d(0, 50px, 0);
+    transform: scale(0.5) translate3d(0, 3.125rem, 0);
   }
   45% {
     opacity: 1;
-    transform: scale(1.05) translate3d(0, -50px, 0);
+    transform: scale(1.05) translate3d(0, -3.125rem, 0);
   }
   100% {
     transform: scale(1) translate3d(0, 0, 0);
@@ -228,11 +228,11 @@
 @-o-keyframes fly-in {
   0% {
     opacity: 0.5;
-    transform: scale(0.5) translate3d(0, 50px, 0);
+    transform: scale(0.5) translate3d(0, 3.125rem, 0);
   }
   45% {
     opacity: 1;
-    transform: scale(1.05) translate3d(0, -50px, 0);
+    transform: scale(1.05) translate3d(0, -3.125rem, 0);
   }
   100% {
     transform: scale(1) translate3d(0, 0, 0);
@@ -241,11 +241,11 @@
 @keyframes fly-in {
   0% {
     opacity: 0.5;
-    transform: scale(0.5) translate3d(0, 50px, 0);
+    transform: scale(0.5) translate3d(0, 3.125rem, 0);
   }
   45% {
     opacity: 1;
-    transform: scale(1.05) translate3d(0, -50px, 0);
+    transform: scale(1.05) translate3d(0, -3.125rem, 0);
   }
   100% {
     transform: scale(1) translate3d(0, 0, 0);
diff --git a/packages/tabBar/index.css b/packages/tabBar/index.css
index d6a9896..8cc6937 100644
--- a/packages/tabBar/index.css
+++ b/packages/tabBar/index.css
@@ -1,7 +1,7 @@
 .zui-tab-bar {
   position: relative;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 1rem;
+  padding-right: 1rem;
   background-color: #fff;
 }
 .zui-tab-bar-inner {
@@ -21,10 +21,10 @@
   align-items: center;
   justify-content: center;
   color: #aaa;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
-  min-height: 50px;
-  padding: 0 16px;
+  min-height: 3.125rem;
+  padding: 0 1rem;
   margin: 0 auto;
   box-sizing: border-box;
   -webkit-user-select: none;
diff --git a/packages/tag/index.css b/packages/tag/index.css
index b85adeb..b8afe9f 100644
--- a/packages/tag/index.css
+++ b/packages/tag/index.css
@@ -1,5 +1,5 @@
 .zui-tag {
-  font-size: 14px;
+  font-size: 0.875rem;
   text-align: center;
   display: inline-block;
   -webkit-user-select: none;
@@ -11,30 +11,30 @@
 }
 .zui-tag .shape-dot {
   border-radius: 50%;
-  height: 16px;
-  width: 16px;
+  height: 1rem;
+  width: 1rem;
 }
 .zui-tag .shape-dot.size-tiny {
-  height: 8px;
-  width: 8px;
+  height: 0.5rem;
+  width: 0.5rem;
 }
 .zui-tag .shape-square {
-  padding: 0 6px;
+  padding: 0 0.375rem;
   border-radius: 50%;
 }
 .zui-tag .shape-square {
-  padding: 0 6px;
+  padding: 0 0.375rem;
   border-radius: 0;
 }
 .zui-tag .shape-fillet {
-  padding: 1px 4px;
-  border-radius: 1px;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 0.0625rem;
 }
 .zui-tag .shape-quarter {
   position: relative;
   display: flex;
-  width: 28px;
-  height: 28px;
+  width: 1.75rem;
+  height: 1.75rem;
   background: transparent;
   overflow: hidden;
 }
@@ -58,34 +58,34 @@
 }
 .zui-tag .shape-quarter .quarter-wrap {
   display: inline-block;
-  padding: 8px 6px 5px 13px;
+  padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
 }
 .zui-tag .shape-quarter .quarter-wrap-hidden {
   visibility: hidden;
   display: inline-block;
-  padding: 8px 6px 5px 13px;
+  padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
 }
 .zui-tag .shape-quarter.size-small {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .zui-tag .shape-quarter.size-tiny {
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
 }
 .zui-tag .shape-coupon {
   position: relative;
-  padding: 0 5px;
+  padding: 0 0.3125rem;
   background: transparent !important;
 }
 .zui-tag .shape-coupon .coupon-container {
-  padding: 1px 0;
+  padding: 0.0625rem 0;
 }
 .zui-tag .shape-coupon .left-coupon,
 .zui-tag .shape-coupon .right-coupon {
   position: absolute;
   top: 0;
-  width: 5px;
+  width: 0.3125rem;
   height: 100%;
 }
 .zui-tag .shape-coupon .left-coupon {
@@ -95,42 +95,42 @@
   right: 0;
 }
 .zui-tag .shape-coupon.size-small {
-  padding: 0 4px;
+  padding: 0 0.25rem;
 }
 .zui-tag .shape-coupon.size-small .left-coupon,
 .zui-tag .shape-coupon.size-small .right-coupon {
-  width: 4px;
+  width: 0.25rem;
 }
 .zui-tag .shape-coupon.size-tiny {
-  padding: 0 2.5px;
+  padding: 0 0.15625rem;
 }
 .zui-tag .shape-coupon.size-tiny .left-coupon,
 .zui-tag .shape-coupon.size-tiny .right-coupon {
-  width: 2.5px;
+  width: 0.15625rem;
 }
 .zui-tag .shape-bubble {
-  width: 25px;
-  padding: 3px 0;
+  width: 1.5625rem;
+  padding: 0.1875rem 0;
   border-radius: 50%;
   border-bottom-left-radius: 0;
   box-sizing: border-box;
 }
 .zui-tag .shape-bubble.size-small {
-  width: 19px;
-  padding: 1.5px 0;
+  width: 1.1875rem;
+  padding: 0.09375rem 0;
 }
 .zui-tag .shape-bubble.size-tiny {
-  width: 12px;
-  padding: 1px 0;
+  width: 0.75rem;
+  padding: 0.0625rem 0;
 }
 .zui-tag .size-large {
-  font-size: 13px;
+  font-size: 0.8125rem;
 }
 .zui-tag .size-small {
-  font-size: 10px;
+  font-size: 0.625rem;
 }
 .zui-tag .size-tiny {
-  font-size: 6px;
+  font-size: 0.375rem;
 }
 .zui-tag .type-fill {
   color: #fff;
--
libgit2 0.21.0