Webleb - Snippet di Codice - Notifica di brindisi

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    width: 100%;
    min-height: 100vh;
    background: #e6e6e6;
}
.connection
{
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 360px;
    height: 70px;
    background: #242526;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.connection p
{
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}
.connection .refreshBtn
{
    font-size: 16px;
    margin-left: 10px;
    text-decoration: none;
    color: #469aff;
}
.connection .wifi-off
{
    margin-right: 20px;
    font-size: 26px;
    color: #7c7c7c;
}
.connection .close
{
    margin-left: 20px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #474747;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.connection .wifi
{
    color: #029702;
    font-size: 26px;
    margin-right: 20px;
}
.online.active
{
    width: 420px;
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
.offline.active
{
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  background: #f2f2f2;
}
.wrapper{
  position: absolute;
  top: 20px;
  left: 20px;
  animation: show_toast 1s ease forwards;
}
@keyframes show_toast {
  0%{
    transform: translateX(-100%);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    transform: translateX(20px);
  }
}
.wrapper.hide{
  animation: hide_toast 1s ease forwards;
}
@keyframes hide_toast {
  0%{
    transform: translateX(20px);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
}
.wrapper .toast{
  background: #fff;
  padding: 20px 15px 20px 20px;
  border-radius: 10px;
  border-left: 5px solid #2ecc71;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  width: 430px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .toast.offline{
  border-color: #ccc;
}
.toast .content{
  display: flex;
  align-items: center;
}
.content .icon{
  font-size: 25px;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background: #2ecc71;
}
.toast.offline .content .icon{
  background: #ccc;
}
.content .details{
  margin-left: 15px;
}
.details span{
  font-size: 20px;
  font-weight: 500;
}
.details p{
  color: #878787;
}
.toast .close-icon{
  color: #878787;
  font-size: 23px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  transition: all 0.3s ease;
}
.close-icon:hover{
  background: #efefef;
}

JS

// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
toast = wrapper.querySelector(".toast"),
title = toast.querySelector("span"),
subTitle = toast.querySelector("p"),
wifiIcon = toast.querySelector(".icon"),
closeIcon = toast.querySelector(".close-icon");

function offline(){ //function for offline
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "You're offline now";
        subTitle.innerText = "Opps! Internet is disconnected.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
    }

setInterval(()=>{ //this setInterval function call ajax frequently after 100ms
        ajax();
    }, 100);
}

Notifica di brindisi

Consigliato

Un codice di fastbug70

Esempio di animazione di caricamento CSS

Esempio di animazione di forme CSS

HTML

CSS

JS

Consigliato

Un codice di fastbug70

Esempio di animazione di caricamento CSS

Esempio di animazione di forme CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS