A nice spinning animation to show an item is being added to the shopping cart. It triggers an alert after the animation is complete.
<button data-addCart class="button button-add-cart"><span>Add To Cart</span></button>
<div data-successMessage class="callout success hide">
Added to cart, Yay!
</div>
.button-add-cart {
position: relative;
overflow: hidden;
&.is-adding {
border-radius: 25px;
max-width: 50px;
max-height: 50px;
cursor: default;
&::after {
animation: fadeIn 0.3s ease-in,
spin 1.3s infinite ease-in-out;
animation-fill-mode: forwards;
}
}
&.is-adding span {
opacity: 0;
}
&::after {
content: " ";
border-top: solid 4px #17cae6;
border-right: solid 4px #17cae6;
border-bottom: solid 4px #17cae6;
border-left: solid 4px transparent;
border-radius: 50px;
position: absolute;
top: 7px;
right: 7px;
bottom: 7px;
left: 7px;
margin: auto;
max-width: 30px;
max-height: 30px;
opacity: 0;
z-index: 1;
}
}
@keyframes spin {
0%, 5% {
transform: rotate(0deg);
}
95%, 100% {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.button-add-cart {
position: relative;
overflow: hidden;
}
.button-add-cart.is-adding {
border-radius: 25px;
max-width: 50px;
max-height: 50px;
cursor: default;
}
.button-add-cart.is-adding::after {
-webkit-animation: fadeIn 0.3s ease-in, spin 1.3s infinite ease-in-out;
animation: fadeIn 0.3s ease-in, spin 1.3s infinite ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.button-add-cart.is-adding span {
opacity: 0;
}
.button-add-cart::after {
content: " ";
border-top: solid 4px #17cae6;
border-right: solid 4px #17cae6;
border-bottom: solid 4px #17cae6;
border-left: solid 4px transparent;
border-radius: 50px;
position: absolute;
top: 7px;
right: 7px;
bottom: 7px;
left: 7px;
margin: auto;
max-width: 30px;
max-height: 30px;
opacity: 0;
z-index: 1;
}
@-webkit-keyframes spin {
0%, 5% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
95%, 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0%, 5% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
95%, 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
$('[data-addCart]').click(function() {
$(this).addClass('is-adding')
setTimeout(function() {
$('[data-addCart]').removeClass('is-adding')
$('[data-successMessage]').removeClass('hide')
}, 2500);
});