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

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

Index: ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
index 3406bcc38f2ee57dfa71f5127b8cc16db506c10f..1ba47291cea1697e309ebb62a29f82c0e79f3f72 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
@@ -4,8 +4,10 @@
 
 :host {
   display: inline-block;
+  height: 50px;
   overflow: hidden;
   position: relative;
+  width: 50px;
 }
 
 #icon {
@@ -38,10 +40,39 @@
   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%;
 }