diff --git a/packages/loading/index.wxml b/packages/loading/index.wxml
index e934288b..7d4a5397 100644
--- a/packages/loading/index.wxml
+++ b/packages/loading/index.wxml
@@ -1,9 +1,10 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
-<view class="custom-class van-loading {{ vertical ? 'van-loading--vertical' : '' }}">
+<view class="custom-class {{ utils.bem('loading', { vertical }) }}">
   <view
     class="van-loading__spinner van-loading__spinner--{{ type }}"
-    style="color: {{ color }}; width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}"
+    style="{{ computed.spinnerStyle({ color, size }) }}"
   >
     <view
       wx:if="{{ type === 'spinner' }}"
@@ -12,7 +13,7 @@
       class="van-loading__dot"
     />
   </view>
-  <view class="van-loading__text" style="font-size: {{ utils.addUnit(textSize) }};">
+  <view class="van-loading__text" style="{{ computed.textStyle({ textSize }) }}">
     <slot />
   </view>
 </view>
diff --git a/packages/loading/index.wxs b/packages/loading/index.wxs
new file mode 100644
index 00000000..02a0b800
--- /dev/null
+++ b/packages/loading/index.wxs
@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function spinnerStyle(data) {
+  return style({
+    color: data.color,
+    width: addUnit(data.size),
+    height: addUnit(data.size),
+  });
+}
+
+function textStyle(data) {
+  return style({
+    'font-size': addUnit(data.textSize),
+  });
+}
+
+module.exports = {
+  spinnerStyle: spinnerStyle,
+  textStyle: textStyle,
+};