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>

Column Counter

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



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000">1303</span>

	</div>



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000">56000</span>

	</div>



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000">4897</span>

	</div>



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000">9877</span>

	</div>



</div>

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



	<div class="col-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-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-6 col-sm-3">

		<i class="icon-twitter"></i>

		<span class="countTo" data-speed="3000">4897</span>

		<h5>TWITTER</h5>

	</div>



	<div class="col-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-6 col-sm-3">

		<span class="countTo" data-speed="3000" style="color:#59BA41">1303</span>

		<h4>HAPPY CLIENTS</h4>

	</div>



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000" style="color:#774F38">56000</span>

		<h4>LINES OF CODE</h4>

	</div>



	<div class="col-6 col-sm-3">

		<span class="countTo" data-speed="3000" style="color:#C02942">4897</span>

		<h4>TWITTER</h4>

	</div>



	<div class="col-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="hide">

	<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;



});