fix(module:card): fix card loading style (#1696)

close #1695

components/card/demo/loading.ts

@@ -3,10 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-card-loading',
   template: `
-    <nz-card style="width:34%;" nzLoading nzTitle="Card title">
+    <nz-card [nzLoading]="loading" nzTitle="Card title">
       Whatever content
     </nz-card>
+    <button nz-button style="margin-top: 16px;" (click)="toggleLoading()">Toggle loading</button>
   `
 })
 export class NzDemoCardLoadingComponent {
+  loading = true;
+  toggleLoading(): void {
+    this.loading = !this.loading;
+  }
 }

components/card/nz-card-loading.component.html

@@ -1,13 +1,53 @@
-<p class="ant-card-loading-block" style="width: 94%;"></p>
-<p>
-  <span class="ant-card-loading-block" style="width: 28%;"></span><span class="ant-card-loading-block" style="width: 62%;"></span>
-</p>
-<p>
-  <span class="ant-card-loading-block" style="width: 22%;"></span><span class="ant-card-loading-block" style="width: 66%;"></span>
-</p>
-<p>
-  <span class="ant-card-loading-block" style="width: 56%;"></span><span class="ant-card-loading-block" style="width: 39%;"></span>
-</p>
-<p>
-  <span class="ant-card-loading-block" style="width: 21%;"></span><span class="ant-card-loading-block" style="width: 15%;"></span><span class="ant-card-loading-block" style="width: 40%;"></span>
-</p>
+<div class="ant-card-loading-content">
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-22" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-15" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-18" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-13" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-9" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-4" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-3" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-16" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+  <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+    <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+    <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
+      <div class="ant-card-loading-block"></div>
+    </div>
+  </div>
+</div>

site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts

@@ -393,7 +393,7 @@ export class AppModule { }
         '@angular/router'                  : '^6.0.0',
         '@angular/animations'              : '^6.0.0',
         'date-fns'                         : '^1.29.0',
-        'ng-zorro-antd'                    : '1.0.0'
+        'ng-zorro-antd'                    : '^1.0.0'
       },
       tags        : [ 'stackblitz', 'sdk' ]
     });