Show a local folder's size in QuickView.

ui/file_manager/file_manager/foreground/elements/files_metadata_entry.html

 <!-- Copyright 2016 The Chromium Authors. All rights reserved.
   -- Use of this source code is governed by a BSD-style license that can be
   -- found in the LICENSE file.
 -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 
 <dom-module id="files-metadata-entry">
   <style>
     div {
@@ skipping 24 matching lines @@
       width: 96px;
     }
 
     #value {
       color: white;
       opacity: 0.8;
       overflow-wrap: break-word;
       vertical-align: bottom;
       width: 128px;
     }
+
+    .loading {

[fukino, 2016/09/06 09:12:45]

instead of the '.loading' class, #value[loading] should work.

[harukam, 2016/09/06 11:25:24]

Thanks.

+      font-size: 30px;
+    }
+
+    .loading:after {
+      overflow: hidden;

[fukino, 2016/09/06 09:12:45]

Sort properties.

[harukam, 2016/09/06 11:25:24]

Done.

+      display: inline-block;
+      vertical-align: bottom;
+      -webkit-animation: ellipsis steps(4,end) 900ms infinite;
+      animation: ellipsis steps(4,end) 900ms infinite;
+      content: "\2026"; /* ascii code for the ellipsis character */
+      width: 0px;
+    }
+
+    @keyframes ellipsis {
+      to {
+        width: 1.25em;
+      }
+    }
+
+    @-webkit-keyframes ellipsis {
+      to {
+        width: 1.25em;
+      }
+    }
   </style>
   <template>
     <div id="box" hidden="[[!value]]">
       <div id="padding"></div>
       <div id="key">[[key]]</div>
-      <div id="value">[[value]]</div>
+      <div id="value" class$="{{setLoadingClass(loading)}}"><div hidden="[[loading]]">[[value]]</div></div>
     </div>
   </template>
 </dom-module>
 
 <script src="files_metadata_entry.js"></script>