<!-- ----------------- Created By InCoder ----------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Check Internet Connection Status using Javascript - InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <div class="inWrapper">
    <div class="inIcon"><i class='bx'></i></div>
    <div class="inStatus">
    </div>
  </div>
</body>

</html>
/* ----------------- Created By InCoder ----------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.inWrapper {
  top: 1rem;
  opacity: 0;
  right: -1rem;
  width: 20rem;
  display: flex;
  height: 3.5rem;
  position: fixed;
  padding: 15px 0px;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  transition: transform 0.4s linear;
  box-shadow: 0 4px 10px #bbbbbb9e;
}

.inWrapper::before {
  content: "";
  left: 0.4rem;
  width: 0.5rem;
  height: 3rem;
  position: absolute;
  border-radius: 5rem;
}

.inIcon {
  display: flex;
  font-size: 24px;
  border-radius: 50%;
  margin-left: 1.2rem;
  align-items: center;
  height: 2.5rem;
  width: 2.5rem;
  margin-right: 0.5rem;
  justify-content: center;
}

/* .inWrapper.inOnline{
    background-color: rgb(209, 250, 229);
} */

/* .inWrapper.inOffline{
    background-color: rgb(254, 202, 202);
} */

.inWrapper.inOnline::before {
  background-color: rgb(16, 185, 129);
}

.inWrapper.inOffline::before {
  background-color: rgb(220, 38, 38);
}

.inWrapper.inOnline .inIcon {
  color: rgb(5, 150, 105);
}

.inWrapper.inOffline .inIcon {
  color: rgb(220, 38, 38);
}

.inStatus h3 {
  font-size: 14px;
}

.inStatus p {
  font-size: 12px;
}

.inWrapper.slide {
  animation: slide 0.5s forwards;
}

@keyframes slide {
  100% {
    right: 1rem;
    opacity: 1;
  }
}

.inWrapper.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-out {
  0% {
    right: 1rem;
    opacity: 1;
  }
  100% {
    right: -1rem;
    opacity: 0;
  }
}

let wrapper = document.querySelector(".inWrapper");
let icon = document.querySelector(".inIcon i");
let statusText = document.querySelector(".inStatus");

function hideToast() {
  wrapper.classList.add("slide-out");

  setTimeout(function () {
    wrapper.classList.remove("slide-out");
  }, 1000);
}

window.addEventListener("online", function () {
  wrapper.classList.toggle("slide");
  wrapper.classList.toggle("inOnline");
  icon.classList.toggle("bx-wifi");
  statusText.innerHTML =
    "<h3> You're Online Now </h3> <p>Hurray! Internet is Connected</p>";
  setTimeout(function () {
    wrapper.classList.toggle("slide");
    wrapper.classList.toggle("inOnline");
    icon.classList.toggle("bx-wifi");
    hideToast();
  }, 4000);
});
window.addEventListener("offline", function () {
  wrapper.classList.toggle("slide");
  wrapper.classList.toggle("inOffline");
  icon.classList.toggle("bx-wifi-off");
  statusText.innerHTML =
    "<h3> You're Offline Now </h3> <p>Opps! Internet is Disconnected</p>";

  setTimeout(function () {
    wrapper.classList.toggle("slide");
    wrapper.classList.toggle("inOffline");
    icon.classList.toggle("bx-wifi-off");
    hideToast();
  }, 4000);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.