emonidi/index.html

## index.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div>
    <div class='widget_wrapper bike'>
    <div class='head'>
      <strong>Your Bike Savings</strong>
    </div>
    <div class='body'>
      <div class='circle'>
        <div class='frame'>
          <img src='http://www.merci.org.uk/drupal/sites/default/files/imagecache/directory_teaser/Bike.jpg'/>
           <div class='overlay'></div>
        </div>

      </div>
      <div class='ammount'>
        <div class='text'></div>
      </div>
    </div>
    <div class='footer'>
      Goal completed at 100%
    </div>
  </div>
  </div>


</body>
</html>

## menqaz.markdown

      
    Raw
  

              menqaz.markdown
            
          
    mENQaZ

A Pen by Emilian Gospodinov on CodePen.
License.

  
## script.js
console.clear();
function setAmount(amount, saved, textDiv, overlayDiv){
    var start = 0;
    function animate(timestamp){
      if(start < saved){
        start = start+(Math.round(saved/30));
        start = start > saved ? saved : start;
        textDiv.innerText = start + '$';
        textDiv.style.transform = 'translate3d(0,-'+top(start,saved)+'%,0)';
        overlayDiv.style.transform = 'translateY('+overlay(start,amount)+'%)';
        window.requestAnimationFrame(animate);
      }

    }

    function top(start, amount){
      return ((amount-start)/amount)*100;
    }

    function overlay(start, amount){
      return 100-(((amount-start)/amount)*100);
    }

    window.requestAnimationFrame(animate);
}

document.addEventListener('DOMContentLoaded', function(){
  setSavingCard(399,275, '.bike')
});

document.addEventListener('click', function(){
  setSavingCard(399,375, '.bike')
})

function setSavingCard(amount, saved, domSelector){
  var title = document.querySelector(domSelector + ' .head strong');
  title.innerHTML = 'Your '+domSelector.replace('.','')+' savings';
  var textDiv = document.querySelector(domSelector+' .text');

  var overlayDiv = document.querySelector(domSelector+' .overlay');
  overlayDiv.style.transform = 'translateY(0%)';
  setAmount(amount, saved, textDiv, overlayDiv);
}


## style.css

.widget_wrapper{
  margin:0 auto;
  background:#fff;
  box-shadow:0px 1px 3px 1px #bbb;
  overflow:hidden;
  margin-bottom: 20px;
}

.widget_wrapper .head{
  padding:10px;
  background:#288eb8;
}
.widget_wrapper .head strong{
  font-family:'Arial';
  padding:10px;
  color:#fff;
}


.widget_wrapper .body{
  border-top:solid 1px #ddd;
  padding:10px;
  display:inline-flex;
  width:95%;
}


.widget_wrapper .body .circle{
  width:50%;
}

.widget_wrapper .body .circle .frame{
  width:110px;
  height:110px;
  border-radius:110px;
  border:solid 5px #288eb8;
  margin:0 auto;
  overflow:hidden;
}

.widget_wrapper .body .circle .frame img{
    width: 110px;
    height: 110px;
}

.widget_wrapper .body .circle .overlay{
  width:110px;
  height:110px;
  background:#288eb8;
  opacity:0.5;
  transform:translateY(0%);
  margin-top:-119px;

}

.widget_wrapper .body .ammount{
  width:50%;
  margin: 0 auto;
  text-align:center;
  padding-top:20px;
}

.widget_wrapper .body .ammount .text{
  will-change:'content';
  margin:auto;
  font-family:'Arial';
  font-size:4em;
  color:#288eb8;
  transform:translate3d(0,200%,0);
}

.widget_wrapper .footer{
  background:#288eb8;
  color:#fff;
  font-family:'Arial';
  padding:10px 20px;
  font-size:1em;
   clear:both;
}
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	</head>
	<body>
	<div>
	<div class='widget_wrapper bike'>
	<div class='head'>
	<strong>Your Bike Savings</strong>
	</div>
	<div class='body'>
	<div class='circle'>
	<div class='frame'>
	<img src='http://www.merci.org.uk/drupal/sites/default/files/imagecache/directory_teaser/Bike.jpg'/>
	<div class='overlay'></div>
	</div>

	</div>
	<div class='ammount'>
	<div class='text'></div>
	</div>
	</div>
	<div class='footer'>
	Goal completed at 100%
	</div>
	</div>
	</div>


	</body>
	</html>
	console.clear();
	function setAmount(amount, saved, textDiv, overlayDiv){
	var start = 0;
	function animate(timestamp){
	if(start < saved){
	start = start+(Math.round(saved/30));
	start = start > saved ? saved : start;
	textDiv.innerText = start + '$';
	textDiv.style.transform = 'translate3d(0,-'+top(start,saved)+'%,0)';
	overlayDiv.style.transform = 'translateY('+overlay(start,amount)+'%)';
	window.requestAnimationFrame(animate);
	}

	}

	function top(start, amount){
	return ((amount-start)/amount)*100;
	}

	function overlay(start, amount){
	return 100-(((amount-start)/amount)*100);
	}

	window.requestAnimationFrame(animate);
	}

	document.addEventListener('DOMContentLoaded', function(){
	setSavingCard(399,275, '.bike')
	});

	document.addEventListener('click', function(){
	setSavingCard(399,375, '.bike')
	})

	function setSavingCard(amount, saved, domSelector){
	var title = document.querySelector(domSelector + ' .head strong');
	title.innerHTML = 'Your '+domSelector.replace('.','')+' savings';
	var textDiv = document.querySelector(domSelector+' .text');

	var overlayDiv = document.querySelector(domSelector+' .overlay');
	overlayDiv.style.transform = 'translateY(0%)';
	setAmount(amount, saved, textDiv, overlayDiv);
	}

	.widget_wrapper{
	margin:0 auto;
	background:#fff;
	box-shadow:0px 1px 3px 1px #bbb;
	overflow:hidden;
	margin-bottom: 20px;
	}

	.widget_wrapper .head{
	padding:10px;
	background:#288eb8;
	}
	.widget_wrapper .head strong{
	font-family:'Arial';
	padding:10px;
	color:#fff;
	}


	.widget_wrapper .body{
	border-top:solid 1px #ddd;
	padding:10px;
	display:inline-flex;
	width:95%;
	}


	.widget_wrapper .body .circle{
	width:50%;
	}

	.widget_wrapper .body .circle .frame{
	width:110px;
	height:110px;
	border-radius:110px;
	border:solid 5px #288eb8;
	margin:0 auto;
	overflow:hidden;
	}

	.widget_wrapper .body .circle .frame img{
	width: 110px;
	height: 110px;
	}

	.widget_wrapper .body .circle .overlay{
	width:110px;
	height:110px;
	background:#288eb8;
	opacity:0.5;
	transform:translateY(0%);
	margin-top:-119px;

	}

	.widget_wrapper .body .ammount{
	width:50%;
	margin: 0 auto;
	text-align:center;
	padding-top:20px;
	}

	.widget_wrapper .body .ammount .text{
	will-change:'content';
	margin:auto;
	font-family:'Arial';
	font-size:4em;
	color:#288eb8;
	transform:translate3d(0,200%,0);
	}

	.widget_wrapper .footer{
	background:#288eb8;
	color:#fff;
	font-family:'Arial';
	padding:10px 20px;
	font-size:1em;
	clear:both;
	}