Internet Detector || Css,HTML,JS || Script for Your Website

DEMO
DEMO INTERNET DETECT DEMO

Copy this Code ⇓

<style>
body {
text-align: center;
font-family: "Segoe UI", Arial, sans-serif;
}
#status {
border: 2px solid;
padding: 15px 20px 15px 40px;
width: 50px;
margin: 0 auto;
border-radius: 20px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
position: relative;
}
#status.online {
color: green;
}
#status.offline {
color: red;
}
#status.online::before, #status.offline::before {
width: 15px;
height: 15px;
content: "";
border-radius: 15px;
box-shadow: 0 0 8px;
position: absolute;
left: 20px;
top: 15px;
}
#status.online::before {
background: green;
}
#status.offline::before {
background: red;
}
</style>
</head>
<body>
<script>
var hint = document.getElementById("hint");

// Defining function to update connection status
function updateConnectionStatus() {
var status = document.getElementById("status");
if(navigator.onLine) {
status.innerHTML = "Online";
status.classList.add("online");
status.classList.remove("offline");
} else {
status.innerHTML = "Offline";
status.classList.add("offline");
status.classList.remove("online");
}
}

// Attaching event handler for the load event
window.addEventListener("load", updateConnectionStatus);

// Attaching event handler for the online event
window.addEventListener("online", function(e) {
updateConnectionStatus();
hint.innerHTML = "And we're back!";
});

// Attaching event handler for the offline event
window.addEventListener("offline", function(e) {
updateConnectionStatus();
hint.innerHTML = "Hey, it looks like you're offline.";
});
//# priyanshuomsd.blogspot.com
</script>
<div id="status"></div>
<p id="hint"></p>