Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
An example of an app that notifies the user of offline and online states
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Offline/Online Demo</title>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
.container {
padding: 0 20px;
max-width: 800px;
margin: 0 auto;
p {
margin-bottom: 1.8em
h1 {
font-size: 4em;
line-height: 1;
margin: 2em 0 .5em;
a {
font-size: 18px;
line-height: 1.5;
.bold {
font-weight: bold
.offline-indicator.offline {
display: block
.offline-indicator {
display: none;
position: fixed;
z-index: 20;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 70%;
max-width: 300px;
border-radius: 100px;
padding: 6px 12px;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
.offline-indicator p {
margin: 0;
line-height: 1.25;
text-align: center
main {
margin-bottom: 2em;
svg {
position: relative;
bottom: -4px;
<header class="header">
<div class="container">
<h1>Kafka on the Shore</h1>
<main class="main">
<div class="container">
Sometimes fate is like a small sandstorm that keeps changing directions. You change direction but the
sandstorm chases you. You turn again, but the storm adjusts. Over and over you play this out, like some
ominous dance with death just before dawn. Why? Because this storm isn’t something that blew in from far
away, something that has nothing to do with you. </p>
<p>This storm is you. Something inside of you. So all you
can do is give in to it, step right inside the storm, closing your eyes and plugging up your ears so the
sand doesn’t get in, and walk through it, step by step. There’s no sun there, no moon, no direction, no
sense of time. Just fine white sand swirling up into the sky like pulverized bones. That’s the kind of
sandstorm you need to imagine.
And you really will have to make it through that violent, metaphysical, symbolic storm. No matter how
metaphysical or symbolic it might be, make no mistake about it: it will cut through flesh like a
thousand razor blades. People will bleed there, and you will bleed too. Hot, red blood. You’ll catch
that blood in your hands, your own blood and the blood of others.
And once the storm is over you won’t remember how you made it through, how you managed to survive. You
won’t even be sure, in fact, whether the storm is really over. But one thing is certain. When you come
out of the storm you won’t be the same person who walked in. That’s what this storm’s all about.
<p class="bold"><i>–Haruki Murakami, Kafka On The Shore</i></p>
<div class="offline-indicator">
<p><span><svg xmlns="" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-cloud-off">
d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3">
<line x1="1" y1="1" x2="23" y2="23"></line>
<span>You seem to be offline</span></p>
(function () {
const offlineIndicator = document.querySelector('.offline-indicator'),
onlineStatus = e => {
navigator.onLine ?
(offlineIndicator.classList.remove('offline')) :
window.addEventListener('load', onlineStatus);
window.addEventListener('online', onlineStatus);
window.addEventListener('offline', onlineStatus);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.