mushfiqweb

var connectionCost = NetworkInformation.GetInternetConnectionProfile().GetConnectionCost();
if (connectionCost.NetworkCostType == NetworkCostType.Unknown 
        || connectionCost.NetworkCostType == NetworkCostType.Unrestricted)
{
    //Connection cost is unknown/unrestricted
}
else
{
   //Metered Network
}

mushfiqweb

// register for network status change notifications
 networkStatusCallback = new NetworkStatusChangedEventHandler(OnNetworkStatusChange);
 if (!registeredNetworkStatusNotif)
 {
     NetworkInformation.NetworkStatusChanged += networkStatusCallback;
     registeredNetworkStatusNotif = true;
 }

async void OnNetworkStatusChange(object sender)
{

mushfiqweb

<section class="mod model-1">
  <div class="spinner"></div>
</section>

mushfiqweb

section {
  height: 110px;
  float: left;
  width: 50%; 
  position: relative;
}

mushfiqweb

.spinner {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

mushfiqweb

.model-1 {
  background: #fff;
}
.model-1 .spinner {
  color: #f00;
  -webkit-animation: color-bubble 2s linear 0s infinite;
  animation: color-bubble 2s linear 0s infinite;
}
.model-1 .spinner:after, .model-1 .spinner:before {
  content: '';

mushfiqweb

section {
  height: 110px;
  float: left;
  width: 50%; 
  position: relative;
}

.spinner {
  width: 50px;

mushfiqweb

var currentTop,
	currentLeft;

/* With layout thrashing. */
currentTop = element.style.top; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */

currentLeft = element.style.left; /* QUERY */
element.style.left = currentLeft + 1; /* UPDATE */

mushfiqweb

var startingTop = 0;

/* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */
setInterval(function() {
	/* Since this ticks 60 times a second, we divide the top property's increment of 1 unit per 1 second by 60. */
    element.style.top = (startingTop += 1/60);
}, 16);

/* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */
function tick () {

mushfiqweb

$element
	/* Slide the element down into view. */
	.velocity({ opacity: 1, top: "50%" })
	/* After a delay of 1000ms, slide the element out of view. */
	.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });