AndroidCSS

Android material design Programming Blog

5+ CSS loading animation for e-commerce websites

The 5+ CSS loading animation provided here may help your e-commerce website’s design look good. Hope, this tutorial helpful for you.

The CSS e-commerce loading animation does not use any images/gif to do animation, also it does not use any library to do animation stuff. The design and animations are achieved using only CSS.

The last three CSS e-commerce loading uses font awesome icon font for icons if you don’t know what font awesome icons are then please read this article.

Download from github

CSS Spinning cartwheels loading animation

The major part of the cart is drawn from adding an extra element from CSS3 :before and :after property.

cartwheels are given infinite rotation from CSS3 animation.

Demo

HTML

<div id="cart-block">
  <div id="cart-body"> </div>
  <div id="cart-wheel1"> </div>
  <div id="cart-wheel2"> </div>
</div>

CSS

#cart-block{
	position:relative;
	width:90px;
}

#cart-body{
	border-top: 50px solid black;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	height: 0;
	width: 50px;
}

#cart-body:after{
  content: "";
  position:absolute;
  border: 0 solid transparent;
  border-top: 8px solid black;
  border-left: 8px solid black;
  width: 10px;
  height: 20px;
  top:-15px;
  right:-12px;
  transform: rotate(30deg);
  border-radius:5px;
}

#cart-body:before{
	position:absolute;
	content:"";
	border-top: 30px solid white;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 40px;
	top:10px;
	left:10px;
}

#cart-wheel1{
	position:relative;
	width:20px;
	height:20px;
	border-radius:100%;
	border:3px solid #000;
	background:rgba(0,0,0,0);
	top:1px;
	left:15px;
	animation: rotation 0.5s linear infinite;
}

#cart-wheel1:after{
	content:"";
	position:absolute;
	width:20px;
	height:3px;
	background-color:#000;
	top:8px;
}

#cart-wheel1:before{
	content:"";
	position:absolute;
	width:3px;
	height:20px;
	background-color:#000;
	left:8px;
}

#cart-wheel2{
	position:relative;
	width:20px;
	height:20px;
	border-radius:100%;
	border:3px solid #000;
	background:rgba(0,0,0,0);
	top:-25px;
	left:45px;
	animation: rotation 0.5s linear infinite;
}

#cart-wheel2:after{
	content:"";
	position:absolute;
	width:20px;
	height:3px;
	background-color:#000;
	top:8px;
}

#cart-wheel2:before{
	content:"";
	position:absolute;
	width:3px;
	height:20px;
	background-color:#000;
	left:8px;
}

@keyframes rotation {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
}

Animated CSS loading e-commerce basket

The two new bars are drawn from CSS3 :after and :before property. the transform-origin of all three bars are set to bottom to make it scale from the bottom and different speed duration is applied to each bar.

Demo

HTML

<div id="basket-block">
  <div id="basket-body"> </div>
  <div id="basket-handle"> </div>
  <div id="basket-strip"> </div>
</div>

CSS

#basket-block{
	position:relative;
}

#basket-body{
	position:absolute;
	border-top: 50px solid black;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 50px;
	padding:20px;
	top:0;
	left:0;
}

#basket-body:before{
	position:absolute;
	content:"";
	width:120px;
	height:20px;
	border-radius:10px;
	background-color:#000;
	top:-60px;
	left:-15px;
}

#basket-body:after{
	position:absolute;
	content:"";
	width:90px;
	height:20px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:#000;
	top:-10px;
	left:0px;
}

#basket-handle{
	position:absolute;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #000;
	top:-60px;
	left:30px;
}

#basket-handle:after{
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid #fff;
	top:20px;
	left:-15px;
}

#basket-handle:before{
	content:"";
	position:absolute;
	width: 5px;
	height: 5px;
	border-radius:100%;
	top:10px;
	left:-2px;
	background-color:#fff;
}

#basket-strip{
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	top:10px;
	left:25px;
	transform-origin:bottom;
	animation: scale 1s ease infinite;
}

#basket-strip:after{
	content:"";
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	left:25px;
	transform-origin:top;
	animation: scale 1s ease infinite;
}

#basket-strip:before{
	content:"";
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	left:50px;
	transform-origin:bottom;
	animation: scale 1s ease infinite;
}

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

CSS hanging baskets loading animation

Uses font awesome icon for icons. An infinite rotation is applied for each icon from -30deg to 30deg.

Demo

HTML

<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>

CSS

.icon-basket{
	font-size:36px;
	color:black;
	transform-origin:top;
	animation: rotation 2s ease infinite;
}

	
@keyframes rotation {
 0% {transform: rotate(-30deg);}
 50% {transform: rotate(30deg);}
 100% {transform: rotate(-30deg);}
}

Pure CSS cart glow animation

Uses font awesome icon for icons. The icon is scaled from 0 to 1 and vice-versa with opacity.

Demo

HTML

<div class="fa fa-shopping-cart icon-cart"></div>

CSS

.icon-cart{
	font-size:70px;
	color:#000;
	animation: scale 2s ease infinite;
}
	
@keyframes scale {
 0% {transform: scale(0.5);opacity:0;}
 50% {transform: scale(1);opacity:1;}
 100% {transform: scale(0.5);opacity:0;}
}

E-commerce basket CSS 3D rotation loading animation

Used icon from font awesome. Both Z and Y axis are given rotation from 0 to 360 and vice-versa infinitely.

Demo

HTML

<div class="fa fa-shopping-basket fa-5x icon-credit"></div>

CSS

.icon-credit{
	font-size:70px;
	color:#000;
	animation: scale 3s ease infinite;
}

@keyframes scale {
 0% {transform: rotateZ(0deg);transform: rotateY(0deg);}
 50% {transform: rotateZ(360deg);transform:rotateY(360deg);}
 100% {transform: rotateZ(0deg);transform:rotateY(0deg);}
}

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑