/* 
*  The .img_wrapper and img styles should be 
*  changed to suit your project. The only crucial
*  properties are the opacity values and CSS3 transitions
*  defined on the img tags.
*/

.img_wrapper{
    position: relative;
    padding-top: 75%;
    /*margin-bottom: 40px;*/
    background: #fafafa;
    overflow: hidden;
}

.img_wrapper img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
}

.img_wrapper.loaded img{
    opacity: 1;
}

.img_wrapper.loaded .css_spinner{
    display: none;
}

/*
* CSS loading spinner styles for second example.
* You could also use a background image .gif 
* on the img_wrapper, or any rotating element.
*/

.css_spinner{
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin: -24px 0 0 -24px;
	opacity: .3;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
}

.css_spinner .half{
	position: absolute;
	width: 24px;
	height: 48px;
	top: 0;
	overflow: hidden;
}

.css_spinner .left{
	left: 0px;
	
	-webkit-border-radius: 999px 0 0 999px;
	-moz-border-radius: 999px 0 0 999px;
	border-radius: 999px 0 0 999px;
}

.css_spinner .right{
	left: 24px;
	
	-webkit-border-radius: 0 999px 999px 0;
	-moz-border-radius: 0 999px 999px 0;
	border-radius: 0 999px 999px 0;
}

.css_spinner .band{
	position: absolute;
	width: 24px;
	height: 48px;
	background: #922d8d;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
	
	-webkit-animation: cssSpinnerRight 1s infinite linear;
	-moz-animation: cssSpinnerRight 1s infinite linear;
}

.css_spinner .left .band{
	left: 0;
	border-left: 24px solid #fafafa;

	-webkit-animation: cssSpinnerLeft 1s infinite linear;
	-moz-animation: cssSpinnerLeft 1s infinite linear;
}

.css_spinner .right .band{
	right: 0;
	border-right: 24px solid #fafafa;
}

@-webkit-keyframes cssSpinnerLeft{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}

@-webkit-keyframes cssSpinnerRight{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(180deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(360deg)}
  100%{-webkit-transform:rotate(360deg)}
}

@-moz-keyframes cssSpinnerLeft{
  0%{-moz-transform:rotate(0deg)}
  25%{-moz-transform:rotate(0deg)}
  50%{-moz-transform:rotate(180deg)}
  75%{-moz-transform:rotate(180deg)}
  100%{-moz-transform:rotate(360deg)}
}

@-moz-keyframes cssSpinnerRight{
  0%{-moz-transform:rotate(0deg)}
  25%{-moz-transform:rotate(180deg)}
  50%{-moz-transform:rotate(180deg)}
  75%{-moz-transform:rotate(360deg)}
  100%{-moz-transform:rotate(360deg)}
}