How Can We Help?
< Back
You are here:
Print

Temporary solution for adding a loader

@-webkit-keyframes a2cp-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes a2cp-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.a2cp_button.button.loading {
	
	position:relative;
	opacity: 0.5;
}

.a2cp_button.button.loading:after {
	display: inline-block;
	content: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78.02 78.02'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%232d318d;stroke:%232d318d;%7D.cls-1,.cls-2%7Bstroke-miterlimit:10;stroke-width:2px;%7D.cls-2%7Bfill:gray;stroke:gray;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='39.01 25.51 33.39 1 44.63 1 39.01 25.51'/%3E%3Cpolygon class='cls-1' points='39.01 52.51 44.63 77.02 33.39 77.02 39.01 52.51'/%3E%3Cpolygon class='cls-1' points='25.51 39.01 1 44.63 1 33.39 25.51 39.01'/%3E%3Cpolygon class='cls-1' points='52.51 39.01 77.02 33.39 77.02 44.63 52.51 39.01'/%3E%3Cpolygon class='cls-2' points='29.46 29.46 8.15 16.11 16.11 8.15 29.46 29.46'/%3E%3Cpolygon class='cls-2' points='48.56 48.56 69.87 61.91 61.91 69.87 48.56 48.56'/%3E%3Cpolygon class='cls-2' points='29.46 48.56 16.11 69.87 8.15 61.91 29.46 48.56'/%3E%3Cpolygon class='cls-2' points='48.56 29.46 61.91 8.15 69.87 16.11 48.56 29.46'/%3E%3C/svg%3E");
	-webkit-animation: a2cp-spin .75s linear infinite;
	animation: a2cp-spin 1.25s linear infinite;
	height: 40px;
	width: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -20px;
}

.added_to_cart.wc-forward {
	border-radius: 3px;
	background-color: #000;
	color: #fff;
	box-shadow: 2px 2px 5px rgba(0,0,0,.1);
	display: inline-block;
	padding: 10px 20px;
}
Table of Contents