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 uses any images/gif to do animation, also it does not uses 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 cart wheels loading animation

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

cart Wheels 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 bottom and different speed duration is applied for 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. 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 font awesome for icon. Both Z and Y axis given rotation from 0 to 360 and vice-versa infinately.

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 ↑