<style include="diagnostics-shared">
:host {
--cros-icon-color-primary: var(--cros-icon-color-secondary);
}
:host-context(body.jelly-enabled) #connectingIcon {
--paper-spinner-color: var(--cros-sys-progress);
}
#connectingIcon {
height: 20px;
width: 20px;
}
</style>
<div id="iconContainer" hidden$="[[!network]]">
<network-icon id="networkIcon"
hidden$="[[computeShouldDisplaySpinner(network.state)]]"
network-state="[[computeNetworkState(network.*)]]">
</network-icon>
<paper-spinner-lite id="connectingIcon" active tabindex="0"
alt$="[[computeSpinnerAriaLabel(locale, network.state)]]"
hidden$="[[!computeShouldDisplaySpinner(network.state)]]">
</paper-spinner-lite>
</div>