load-shimmer

_.md

[ Launch: test ] 1abc5c5be8d1d318d8bd by ptvans

config.json

{"description":"load-shimmer","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style,css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

<div class="overlay">Ship it.</div>
<div></div>

inlet.js

{}

style.css

.overlay {
	height: 300px;
	width: 500px;
  	margin: 10px;
  padding: 40px;
  	background: #f6f7f8;
  	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-repeat: no-repeat;
	background-size: 800px 300px;
  -webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
    /*  -webkit-animation: shine 2.0s ease infinite; 
  /* Chrome, Safari, Opera */
	/*	animation: shine 2.0s ease infinite;
    background: linear-gradient(left top, #ccc, #666);
		background-size: 400% 400%;    -webkit-animation: shine 2.0s ease infinite; 
  /* Chrome, Safari, Opera */
	/*	animation: shine 2.0s ease infinite;
    background: linear-gradient(left top, #ccc, #666);
		background-size: 400% 400%;*/
}



@-webkit-keyframes placeHolderShimmer
{
  	0% {
    	background-position: -468px 0;
  	}
  	100% { 
    	background-position: 468px 0;
  	}
}


/*
@-webkit-keyframes shine {
    0% {
    	background-position: 0% 0%;
      opacity: 0.4;
      ;}
    10% {
    	background-position: 0% 0%;
      opacity: 0.8;
      ;}
    50% {
    	background-position: 100% 100%;
      ;}
    90% {
    	background-position: 0% 0%;
      opacity: 0.8;
      ;}  
    100% {
    	background-position: 0% 0%;
      opacity: 0.4;
      ;}*/
}