• 1
• 2
• 3
• 4
• 5
• 6
• 7

function displayLoadingIcon (){
  $('body').append('<style>.load-bar{  position: relative;  margin-top: 20px;  width: 100%;  height: 6px;  background-color: #fdba2c;}.bar {  content: "";  display: inline;  position: absolute;  width: 0;  height: 100%;  left: 50%;  text-align: center;}.bar:nth-child(1) {  background-color: #da4733;  animation: loading 3s linear infinite;}.bar:nth-child(2) {  background-color: #3b78e7;  animation: loading 3s linear 1s infinite;}.bar:nth-child(3) {  background-color: #fdba2c;  animation: loading 3s linear 2s infinite;}@keyframes loading {    from {left: 50%; width: 0;z-index:100;}    33.3333% {left: 0; width: 100%;z-index: 10;}    to {left: 0; width: 100%;}} .message{ font-size: 48px;} @media only screen and (max-width: 600px) { .message{ font-size: 24px;} }</style>');
  $('body').append('<div style="width:100%;height:100%;z-index:10;top:0;left:0;position:fixed;opacity:0.8;background: #000;"><p class="message" style="display:flex; align-items: center; justify-content: center; color: white; margin-top:30%">Adding to cart</p><div class="load-bar"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div></div>'); 
};

$('.arrow').click(displayLoadingIcon);
$('.add-to-cart').click(displayLoadingIcon);