COUNTERS

Inline Counter

Welcome, we have 198765 members, be number 1988765

<p class="bold">
	Welcome, we have <span class="countTo text-danger font-raleway" data-speed="3000">198765</span> 
	members, be number <code class="countTo font-raleway" data-speed="3000">1988765</code>
</p>

Circle Counter

<div class="piechart" data-color="#F0AD4E" data-size="150" data-percent="70" data-width="2" data-animate="1700">
	<span class="countTo font-raleway" data-speed="3000">4555</span>
</div>

Column Counter

<div class="row countTo-sm text-center">

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000">1303</span>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000">56000</span>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000">4897</span>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000">9877</span>
	</div>

</div>

<div class="row countTo-md text-center">

	<div class="col-xs-6 col-sm-3">
		<i class="icon-happy"></i>
		<span class="countTo" data-speed="3000">1303</span>
		<h5>HAPPY CLIENTS</h5>
	</div>

	<div class="col-xs-6 col-sm-3">
		<i class="icon-quote"></i>
		<span class="countTo" data-speed="3000">56000</span>
		<h5>LINES OF CODE</h5>
	</div>

	<div class="col-xs-6 col-sm-3">
		<i class="icon-twitter"></i>
		<span class="countTo" data-speed="3000">4897</span>
		<h5>TWITTER</h5>
	</div>

	<div class="col-xs-6 col-sm-3">
		<i class="icon-facebook"></i>
		<span class="countTo" data-speed="3000">9877</span>
		<h5>FACEBOOK</h5>
	</div>

</div>

<div class="row countTo-lg text-center">

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000" style="color:#59BA41">1303</span>
		<h4>HAPPY CLIENTS</h4>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000" style="color:#774F38">56000</span>
		<h4>LINES OF CODE</h4>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000" style="color:#C02942">4897</span>
		<h4>TWITTER</h4>
	</div>

	<div class="col-xs-6 col-sm-3">
		<span class="countTo" data-speed="3000" style="color:#1693A5">9877</span>
		<h4>FACEBOOK</h4>
	</div>

</div>

Countdown

<!-- 
	OPTIONAL FOR OTHER LANGUAGE - ADD:
	data-labels="Years,Months,Weeks,Days,Hours,Minutes,Seconds"
	 
	OR FOR SHORT LABELS:
	data-labels="years,months,weeks,days,hour,min,sec"
	
	FOR CIRCLE & SQUARED:
	.dark		(used on sliders - example: page-coming-soon-2.html)
	.light		(used on sliders)
	.theme-style
 -->


<!-- Small Countdown -->
<div class="countdown countdown-sm" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Medium Countdown -->
<div class="countdown countdown-md" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Large Countdown -->
<div class="countdown countdown-lg" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Circle Countdown -->
<div class="countdown circle" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Squared Countdown -->
<div class="countdown squared" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Bordered Circle Countdown -->
<div class="countdown bordered" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Bordered Squared Countdown -->
<div class="countdown bordered-squared" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>

<!-- Bordered Theme Style Countdown -->
<div class="countdown bordered-squared theme-style" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>



<!-- Inline Countdown -->
<div class="countdown countdown-inline" data-from="December 31, 2018 15:03:26"><!-- Example Date From: December 31, 2018 15:03:26 --></div>



<!-- Download Countdown -->
<!-- Download Button -->
<a href="http://www.stepofweb.com" class="countdown-download btn btn-success btn-lg" 
	data-for="download_container" 
	data-seconds="5">Start Download</a>

<!-- Download Container - see data-for and this container ID -->
<span id="download_container" class="softhide">
	<span class="download-message hide"><!-- Unable to redirect message -->
		Your Download should start automatically. If it dosen't, 
		<a href="http://www.stepofweb.com" class="alert-link">click here</a>.
	</span>
	<span class="download-wait"><!-- Wait (see data-seconds) to redirect! -->
		<strong>Please Wait!</strong> Download will start in <span class="countdown countdown-inline"></span>.
	</span>
</span>



// JAVASCRIPT USED FOR BUTTON DOWNLOAD [assets/js/scripts.js, function _countDown()]
jQuery(".countdown-download").bind("click", function(e){
	e.preventDefault();

	var _t = jQuery(this),
		cd_container 	= _t.attr('data-for'),
		_countdown	= jQuery("#"+cd_container+' span.download-wait>.countdown'),
		_seconds 	= parseInt(_t.attr('data-seconds')),
		_dataURL	= _t.attr('href');

	_t.fadeOut(250, function(){
		jQuery("#"+cd_container).fadeIn(250, function() {

			var currentDate = new Date();
			currentDate.setSeconds(currentDate.getSeconds() + _seconds);

			_countdown.countdown({
				until: currentDate,
				format: 'S',
				expiryUrl: _dataURL,
				onExpiry: function(){
					jQuery("#"+cd_container+' span.download-message').removeClass('hide');
					jQuery("#"+cd_container+' span.download-wait').addClass('hide');
				}
			});

		});
	});

	return false;

});