Support badges and connecting animation in cr-network-icon element

ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css

 /* Copyright 2015 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. */
 
 :host {
   display: inline-block;
+  height: 50px;
   overflow: hidden;
   position: relative;
+  width: 50px;
 }
 
 #icon {
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
 #icon.multi-level {
   height: 500%;
@@ skipping 12 matching lines @@
 }
 
 #icon.level3 {
   top: -300%;
 }
 
 #icon.level4 {
   top: -400%;
 }
 
+/* Connecting animation */
+
+#icon.connecting {
+  -webkit-animation: levels 1s infinite;
+  -webkit-animation-timing-function: steps(4, start);
+}
+
+@-webkit-keyframes levels {
+  from {
+    top: 0%;
+  }
+  to {
+    top: -400%;
+  }
+}
+
+/* Badges. */
+/* Note: These use left/right because we do not reverse the badges for RTL. */
+
+/* Upper-left corner */
+#technology {
+  height: 40%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+}
+
+/* Lower-right corner */
+#roaming,
 #secure {
   height: 40%;
-  margin-left: 60%;
-  margin-top: 60%;
+  left: 60%;
   position: absolute;
+  top: 60%;
   width: 40%;
 }