cr-network-icon: Animate connecting using .svg

ui/webui/resources/cr_elements/network/cr_network_icon.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/network/network_icons.html">
 
 <dom-module id="cr-network-icon">
   <template>
     <style>
       :host {
         overflow: hidden;
@@ skipping 21 matching lines @@
       }
 
       /* Lower-right corner */
       #secure {
         height: 20px;
         left: 16px;
         position: absolute;
         top: 16px;
         width: 20px;
       }
+
+      /* Images */
+      #icon.ethernet {
+        background: url(ethernet.svg);
+      }
+
+      #icon.vpn {
+        background: url(vpn.svg);
+      }
+
+      /* Wi-Fi images */
+      #icon.wifi-0 {
+        background: url(wifi_0.svg);
+      }
+
+      #icon.wifi-1 {
+        background: url(wifi_1.svg);
+      }
+
+      #icon.wifi-2 {
+        background: url(wifi_2.svg);
+      }
+
+      #icon.wifi-3 {
+        background: url(wifi_3.svg);
+      }
+
+      #icon.wifi-4 {
+        background: url(wifi_4.svg);
+      }
+
+      #icon.wifi-off {
+        background: url(wifi_off.svg);
+      }
+
+      #icon.wifi-connecting {
+        animation: wifi-levels 750ms infinite;
+        animation-direction: alternate;
+        animation-timing-function: steps(4, end);
+      }
+
+      @keyframes wifi-levels {
+        0% { background: url(wifi_0.svg); }
+        25% { background: url(wifi_1.svg); }
+        50% { background: url(wifi_2.svg); }
+        75% { background: url(wifi_3.svg); }
+        100% { background: url(wifi_4.svg); }
+      }
+
+      /* Cellular images */
+      #icon.cellular-0 {
+        background: url(cellular_0.svg);
+      }
+
+      #icon.cellular-1 {
+        background: url(cellular_1.svg);
+      }
+
+      #icon.cellular-2 {
+        background: url(cellular_2.svg);
+      }
+
+      #icon.cellular-3 {
+        background: url(cellular_3.svg);
+      }
+
+      #icon.cellular-4 {
+        background: url(cellular_4.svg);
+      }
+
+      #icon.cellular-connecting {
+        animation: cellular-levels 750ms infinite;
+        animation-direction: alternate;
+        animation-timing-function: steps(4, end);
+      }
+
+      @keyframes cellular-levels {
+        0% { background: url(cellular_0.svg); }
+        25% { background: url(cellular_1.svg); }
+        50% { background: url(cellular_2.svg); }
+        75% { background: url(cellular_3.svg); }
+        100% { background: url(cellular_4.svg); }
+      }
     </style>
-    <iron-icon id="icon" icon="[[getIcon_(networkState, isListItem)]]">
-    </iron-icon>
+    <div id="icon" class$="[[getIconClass_(networkState, isListItem)]]">
+    </div>
     <iron-icon id="technology" hidden ="[[!showTechnology_(networkState)]]"
         icon="[[getTechnology_(networkState)]]">
     </iron-icon>
     <iron-icon id="secure" hidden ="[[!showSecure_(networkState)]]"
         icon="network:badge-secure">
     </iron-icon>
   </template>
   <script src="cr_network_icon.js"></script>
 </dom-module>