5 طرح CSS برای سایت های فروشگاهی

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.

دانلود سورس کد CSS

5 طرح CSS برای سایت های فروشگاهی

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;}
}

5 طرح CSS برای سایت های فروشگاهی

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);}
}