<p id="status"></p>
.online, .offline{
  display: inline-block;
  padding: 0.5rem;
  border-radius: 5px;
  margin: 1rem;
}

.online{
  border: 3px solid green;
  color: green;
}

.offline{
  border: 3px solid red;
  color: red;
}
var s = document.getElementById('status');

setInterval(function () {
  s.className = navigator.onLine ? 'online' : 'offline';
  s.innerHTML = navigator.onLine ? 'online' : 'offline';  
}, 250);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.