VOX SweetAlert

VOX SweetAlert Popup

by Cristiano Oliveira

HTML

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/[email protected]/minimal.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

<button id='swal-popup-example-button'>Export App</button>

CSS

body {
  font-family: 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sa2_quadro {
  padding: 0 0 1.25em 0;
	outline: 0.1rem solid #e1e1e1;
  justify-content: normal
}

.sa2_html {
  padding: 0.85em 1.25em 0 1.25em;
  text-align: center;
}

.sa2_titulo {
	background-color: #dfdfdd;
	text-align: left;
	height: 30px;
	padding-left: 0.5em;
	line-height: 30px;
  font-size: 15px;
}

.sa2_loader {
  border-color: #666 transparent #666 transparent;
}

.sa2_confirm {
  background-color: #666;
  color: #fff;
  outline: 0.1rem solid #212121;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  line-height: 32px;
  height: 32px;
  width: 100px;
}

.sa2_confirm:focus {
  box-shadow: 0 0 0 3px rgba(102,102,102,.5);
}

.sa2_close {
  color: #fff;
  outline: 0.1rem solid #212121;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  line-height: 32px;
  height: 32px;
  width: 100px;
}

#save-popup-icon-img{
  animation-name: expand;
  animation-duration: 1s;
}

@keyframes expand{
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}

#save-popup-bar {
  width: 100%;
}

JavaScript

document.getElementById('swal-popup-example-button').addEventListener('click', function(){

	Swal.fire({
  title: "Diagnosticar AutoDJ",
    html: "<div id='save-popup-icon'><img src='https://res.cloudinary.com/cdowebcast/image/upload/v1697525891/android/android-dev-1.png' width='100%'></div><progress id=\"save-popup-bar\" value=\"0\" max=\"100\"></progress><span id='save-popup-message'><br>Checking credentials...</span>",
    confirmButtonColor: "#666",
    confirmButtonText: "OK",
    allowOutsideClick: false,
    customClass: {
    	popup: 'sa2_quadro',
      title: 'sa2_titulo',
      loader: 'sa2_loader',
      htmlContainer: 'sa2_html',
      confirmButton: 'sa2_confirm',
      closeButton: 'sa2_close',
      
    }
 });

	Swal.showLoading();
  
 let popupTextElement = document.getElementById("save-popup-message");
 let popupBarElement = document.getElementById("save-popup-bar");
 
 setTimeout(function () {
  	popupTextElement.innerHTML = "<br/>Initial dataset has been saved";
    popupBarElement.value = 20;
  }, 2000);
  
  setTimeout(function () {
  	popupTextElement.innerHTML = "<br/>Payment Confirmed";
    popupBarElement.value = 40;
  }, 3500);
  
	setTimeout(function () {
  	popupTextElement.innerHTML = "<br/>Customers saved";
    popupBarElement.value = 60;
  }, 5000);

	setTimeout(function () {
  	popupTextElement.innerHTML = "<br/>Creative uploaded";
    popupBarElement.value = 80;
    
    let innerHtml = popupTextElement.innerHTML;
    Swal.hideLoading();
    
    //document.getElementById("save-popup-icon").outerHTML = "<img id='save-popup-icon-img' width=120 src='https://ludu-assets.s3.amazonaws.com/lesson-icons/yWfNH8VAg7yf2SKSaRdu'/>";
    
    //document.getElementById("save-popup-title").outerHTML = "Success!";
    popupBarElement.value = 100;
    
  }, 8000);
  
});

//http://cocobambu.com/usa/newyear/assets/vendors/sweetalert2/