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 : 90 px ; } # cart-body { border-top : 50 px solid black ; border-left : 20 px solid transparent ; border-right : 20 px solid transparent ; height : 0 ; width : 50 px ; } # cart-body : after { content : " " ; position : absolute ; border : 0 solid transparent ; border-top : 8 px solid black ; border-left : 8 px solid black ; width : 10 px ; height : 20 px ; top : - 15 px ; right : - 12 px ; transform : rotate ( 30 deg ) ; border-radius : 5 px ; } # cart-body : before { position : absolute ; content : " " ; border-top : 30 px solid white ; border-left : 15 px solid transparent ; border-right : 15 px solid transparent ; height : 0 ; width : 40 px ; top : 10 px ; left : 10 px ; } # cart-wheel1 { position : relative ; width : 20 px ; height : 20 px ; border-radius : 100 % ; border : 3 px solid # 000 ; background : rgba ( 0 , 0 , 0 , 0 ) ; top : 1 px ; left : 15 px ; animation : rotation 0. 5 s linear infinite ; } # cart-wheel1 : after { content : " " ; position : absolute ; width : 20 px ; height : 3 px ; background-color : # 000 ; top : 8 px ; } # cart-wheel1 : before { content : " " ; position : absolute ; width : 3 px ; height : 20 px ; background-color : # 000 ; left : 8 px ; } # cart-wheel2 { position : relative ; width : 20 px ; height : 20 px ; border-radius : 100 % ; border : 3 px solid # 000 ; background : rgba ( 0 , 0 , 0 , 0 ) ; top : - 25 px ; left : 45 px ; animation : rotation 0. 5 s linear infinite ; } # cart-wheel2 : after { content : " " ; position : absolute ; width : 20 px ; height : 3 px ; background-color : # 000 ; top : 8 px ; } # cart-wheel2 : before { content : " " ; position : absolute ; width : 3 px ; height : 20 px ; background-color : # 000 ; left : 8 px ; } @ keyframes rotation { from { transform : rotate ( 0 deg ) ; } to { transform : rotate ( 360 deg ) ; } }

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 : 50 px solid black ; border-left : 10 px solid transparent ; border-right : 10 px solid transparent ; height : 0 ; width : 50 px ; padding : 20 px ; top : 0 ; left : 0 ; } # basket-body : before { position : absolute ; content : " " ; width : 120 px ; height : 20 px ; border-radius : 10 px ; background-color : # 000 ; top : - 60 px ; left : - 15 px ; } # basket-body : after { position : absolute ; content : " " ; width : 90 px ; height : 20 px ; border-bottom-left-radius : 10 px ; border-bottom-right-radius : 10 px ; background-color : # 000 ; top : - 10 px ; left : 0 px ; } # basket-handle { position : absolute ; width : 0 ; height : 0 ; border-left : 25 px solid transparent ; border-right : 25 px solid transparent ; border-bottom : 50 px solid # 000 ; top : - 60 px ; left : 30 px ; } # basket-handle : after { content : " " ; position : absolute ; width : 0 ; height : 0 ; border-left : 15 px solid transparent ; border-right : 15 px solid transparent ; border-bottom : 30 px solid # fff ; top : 20 px ; left : - 15 px ; } # basket-handle : before { content : " " ; position : absolute ; width : 5 px ; height : 5 px ; border-radius : 100 % ; top : 10 px ; left : - 2 px ; background-color : # fff ; } # basket-strip { position : absolute ; width : 10 px ; height : 35 px ; background-color : # fff ; border-radius : 10 px ; top : 10 px ; left : 25 px ; transform-origin : bottom ; animation : scale 1 s ease infinite ; } # basket-strip : after { content : " " ; position : absolute ; width : 10 px ; height : 35 px ; background-color : # fff ; border-radius : 10 px ; left : 25 px ; transform-origin : top ; animation : scale 1 s ease infinite ; } # basket-strip : before { content : " " ; position : absolute ; width : 10 px ; height : 35 px ; background-color : # fff ; border-radius : 10 px ; left : 50 px ; transform-origin : bottom ; animation : scale 1 s 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 : 36 px ; color : black ; transform-origin : top ; animation : rotation 2 s ease infinite ; } @ keyframes rotation { 0 % { transform : rotate ( - 30 deg ) ; } 50 % { transform : rotate ( 30 deg ) ; } 100 % { transform : rotate ( - 30 deg ) ; } }

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 : 70 px ; color : # 000 ; animation : scale 2 s 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