How to use CSS to implement a page that monitors network connection status

This article brings you the content is about how to use CSS to monitor the network connection status of the page, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

The Navigator.online property is used to get online status, and with the corresponding event trigger, you can develop an online detection tool. The whole process is divided into two parts, first to draw the visual effect, and then detect the online/offline status.

Defines the DOM, which contains the client, the signal, and the server:

<div class= "Detector" >    <div class= "Client" ></div>    <div class= "Signal" ></div >    <div class= "Server" ></div></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;}

Add a horizontal bar at the top to show whether the current status is online or offline and green to indicate online:

: root {    --status-color:green;} Body {    background:linear-gradient (Var (--status-color) 5VH, #ccc 5VH);}

Define Container Dimensions:

. detector {    width:40em;    Height:14em;    font-size:10px;}

Define the overall layout and main color of child elements (client, signal, server):

. detector {    Display:flex;    Justify-content:space-between;    Align-items:center;    Color: #333;}

Set the common properties of child elements (client, signal, server) and their pseudo-elements:

. detector > * {    position:relative;    Box-sizing:border-box;}. Detector > *::before,.detector > *::after {    content: ';    Position:absolute;    Box-sizing:border-box;}

Draw the client's display:

. client {    width:17em;    Height:10em;    Border:0.5em solid;    Border-radius:0.5em;}

To draw the base of the display with pseudo-elements:

. client {    Display:flex;    Flex-direction:column;    Align-items:center;    Margin-top: -4em;}. Client::before {    width:1.5em;    Height:3em;    Background-color:currentcolor;    Top:9.5em;}. client::after {    width:5em;    Height:1em;    Background-color:currentcolor;    Border-radius:0.3em;    Top:12.5em;}

Draw the server's chassis:

. server {    width:7em;    Height:14em;    Border:0.5em solid;    Border-radius:0.5em;}

Draw the hard drive with pseudo-elements, pay attention to the usage of the shadows here, and draw the second hard drive with shadows:

. server::before {    width:5em;    Height:1em;    Background-color:currentcolor;    Border-radius:0.2em;    Top:8em;    left:0.5em;    box-shadow:0 1.5em 0;}

Using pseudo-elements to draw a button, and the same use of the above shadow, this time with a shadow to draw the second button:

. server::after {    width:0.6em;    Height:0.6em;    Background-color:currentcolor;    border-radius:50%;    right:1.5em;    bottom:0.5em;    Box-shadow:1em 0 0 0.1em;}

Draw a signal, pay attention to the color is represented by the online/offline colors, is currently green:

. signal,.signal::before,.signal::after {    width:1em;    Height:1em;    Background-color:var (--status-color);    border-radius:50%;}. Signal::before {    right:2.5em;}. signal::after {    left:2.5em;}

Add animation to the signal:

. signal,.signal::before,.signal::after {    animation:blink 0.6s infinite;} @keyframes Blink {    50% {        filter:opacity (0.1);    }}

Set the animation delay for the 2nd signal and the 3rd signal, the value of the delay is defined with a variable:

: root {    --second-signal-delay:0.2s;    --third-signal-delay:0.4s;}. Signal::before {    Animation-delay:var (--second-signal-delay);}. Signal::after {    Animation-delay:var (--third-signal-delay);}

At this point, the visual effect has been completed, is currently the effect of online status, in a :root total of 3 variables defined, the top bar and signal is green, flashing lights in turn indicates that the data is being transferred:

: root {    --status-color:green;    --second-signal-delay:0.2s;    --third-signal-delay:0.4s;}

By modifying the values of these 3 variables, you can get the visual effect of the offline state, the top bars and signals turn red, and the lights blink together to indicate that the line is not working:

: root {    --status-color:orangered;    --second-signal-delay:0s;    --third-signal-delay:0s;}

The 2 effects are then dynamically applied by detecting online/offline status.

Define the online status topic:

Const ONLINE_THEME = {    statuscolor: ' Green ',    secondsignaldelay: ' 0.2s ',    thirdsignaldelay: ' 0.4s '}

Similarly, define the offline status topic:

Const OFFLINE_THEME = {    statuscolor: ' orangered ',    secondsignaldelay: ' 0s ',    thirdsignaldelay: ' 0s '}

Create a function that displays different topics based on the online/offline status:

function Detectonlinestatus () {let    theme = Navigator.online? Online_theme:offline_theme let    root = document.documentelement    root.style.setProperty ('--status-color ', Theme.statuscolor)    root.style.setProperty ('--second-signal-delay ', Theme.secondsignaldelay)    Root.style.setProperty ('--third-signal-delay ', Theme.thirdsignaldelay)}detectonlinestatus ()

Now, turn off the WiFi connection, then refresh the page, the page will use a red theme, then open the WiFi connection, then refresh the page, the page will use the green theme.

Next, the detection function is bound to the system event, and when the connection is disconnected or reconnected, the page automatically sets the theme without manually refreshing the page:

Window.addeventlistener (' online ', detectonlinestatus) window.addeventlistener (' Offline ', detectonlinestatus)

Done!