Compteur avec b4

<!DOCTYPE html>
<html>
<head>
    <title>compteur avec bootstrap4 _ NGLESSON.COM | par MEZGANI SAID</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="compteur avec bootstrap4">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div class="container">
	<div class="row mt-5">
		<br/>
		<div class="col text-center">
		  <h2>compteur avec bootstrap4</h2>
		</div>
	</div>
	<div class="row text-center mx-auto mt-3">
		<div class="col">
			<div class="counter">
			<i class="fa fa-code fa-2x"></i>
			<h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
			<p class="count-text ">Client</p>
			</div>
		</div>
		<div class="col">
			<div class="counter">
				<i class="fa fa-coffee fa-2x"></i>
				<h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
				<p class="count-text ">Satisfaction clients</p>
			</div>
		</div>
		<div class="col">
			<div class="counter">
				<i class="fa fa-lightbulb-o fa-2x"></i>
				<h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
				<p class="count-text ">Projets complet</p>
			</div>
		</div>
		<div class="col">
			<div class="counter">
				<i class="fa fa-map-marker fa-2x"></i>
				<h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
				<p class="count-text ">Localisation</p>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
.counter {
    background-color:#f5f5f5;
    padding: 20px 0;
    border-radius: 5px;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
(function ($) {
	$.fn.countTo = function (options) {
		options = options || {};
		
		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);
			
			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;
			
			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};
			
			$self.data('countTo', data);
			
			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);
			
			// initialize the element with the starting value
			render(value);
			
			function updateTimer() {
				value += increment;
				loopCount++;
				
				render(value);
				
				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}
				
				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;
					
					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}
			
			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};
	
	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 6000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};
	
	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Cards box with title

Cards box with title

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Form login b4 01

Form login b4 01

Manual Slideshow

Manual Slideshow

Menu aside style01 slide out

Menu aside style01 slide out

Titre section avec une anmation style01

Titre section avec une anmation style01

Vers le haut

Vers le haut

page scroll progress bar

page scroll progress bar