Dynamic SweetAlert

Dynamic SweetAlert

by Cristiano Oliveira

HTML

<script src="popupTextElement.innerHTML"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<button id='swal-popup-example-button'>Click Me</button>

CSS

#swal-popup-example-button{
  width: 100px;
  height: 25px;
}

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

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

JavaScript

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

	swal({
  icon: "https://stmsrv.com/img/oxygen-icons/128x128/apps/utilities-system-monitor.png",
  	title: "<span id='save-popup-title'>Saving...</span>",
    html: "<div id='save-popup-icon'></div><span id='save-popup-message'></span>",
    confirmButtonColor: "#1a7bb9",
    confirmButtonText: "Ok",
    allowOutsideClick: false
 });

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

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

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