Custom JS slider with animated CSS for the stats type data widget

custom-js-slider-with-animated-css-for-the-stats-type-data-widget.markdown

Custom JS slider with animated CSS for the stats type data widget

Custom JS slider with animated CSS for the stats type data widget Bootstrap compatible - very nice plugin & widget for your website. If you have some reports to show or to display the multiple output in a small space. Then this is awesome.

A Pen by Nishant Dogra on CodePen.

License.

index.html

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h1>Custom JS slider with animated CSS for the stats type data widget</h1><hr>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<div class="alert alert-block">
				<h3 class="leadh3">General Stats</h3>
				
				<!-- another tab starts here  -->
				<div id="tab1" class="tab-data active">
					<div class="stats-blk">
						<h4>Unique Visitors</h4>
						<small>Last week rise by 62%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="width: 62%;">
								<span class="sr-only">62% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Registrations</h4>
						<small>Up by 57% in last 7 days</small>
						<div class="progress">
							<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%;">
								<span class="sr-only">57% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Direct Sales</h4>
						<small>Last month rise by 22%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 22%;">
								<span class="sr-only">22% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Referral Sales</h4>
						<small>Last month rise by 38%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%;">
								<span class="sr-only">38% Complete</span>
							</div>
						</div>
					</div>
				</div>
				
				<!-- another tab starts here  -->
				<div id="tab2" class="tab-data">
					<div class="stats-blk">
						<h4>Repeated Visitors</h4>
						<small>Last week rise by 24%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" style="width: 24%;">
								<span class="sr-only">24% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>FollowUp Appointments</h4>
						<small>Up by 19% in last 7 days</small>
						<div class="progress">
							<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="19" aria-valuemin="0" aria-valuemax="100" style="width: 19%;">
								<span class="sr-only">19% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Missed Appointments</h4>
						<small>Last month rise by 9%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="9" style="width: 9%;">
								<span class="sr-only">9% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Client Feedback</h4>
						<small>Last month rise by 38%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%;">
								<span class="sr-only">38% Complete</span>
							</div>
						</div>
					</div>
				</div>
				
				<!-- another tab starts here  -->
				<div id="tab3" class="tab-data">
					<div class="stats-blk">
						<h4>Client Progress</h4>
						<small>Last week rise by 78%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%;">
								<span class="sr-only">78% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Enquiries</h4>
						<small>Up by 87% in last 7 days</small>
						<div class="progress">
							<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%;">
								<span class="sr-only">87% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Direct Sales</h4>
						<small>Last month rise by 22%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 22%;">
								<span class="sr-only">22% Complete</span>
							</div>
						</div>
					</div>
					
					<div class="stats-blk">
						<h4>Total Sales</h4>
						<small>Last month rise by 38%</small>
						<div class="progress">
							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%;">
								<span class="sr-only">38% Complete</span>
							</div>
						</div>
					</div>
				</div>
				
				
				<ul class="tab-listing">
					<li><a href="#tab1" class="active"></a></li>
					<li><a href="#tab2"></a></li>
					<li><a href="#tab3"></a></li>
				</ul>
				
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-12">
			<p style="font-style: italic; color: #2196f3; font-size: 18px; text-align: center; margin-top: 50px; margin-bottom: 20px;">Follow me on Twitter: <a href="https://twitter.com/mrdogra007/" target="_blank">@mrdogra007</a></p>
		</div>
	</div>
</div>

script.js

$('.tab-listing a').click(function(){
	// remove the pre active class
	$('.tab-data').removeClass('active');
	$('.tab-listing a').removeClass('active');
	// activate the tab by the href="tab ID"
	var active = $(this).attr('href');
	// display the active tab data div
	$('div' + active).addClass('active');
	// Set current tab link to active
	$(this).addClass('active');
	return false;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

.tab-data { display: none;}
.tab-data.active { display: block;}
.alert { width: 100%; box-shadow: 0px 0px 40px 0px rgba( 0, 0, 0, .20 ); border: none; margin-bottom: 20px; padding: 15px;}
h1 { font-size: 24px; text-align: center; font-weight: bold;}
h3.leadh3 { display: inline-block; padding: 0 15px; margin-top: 25px; margin-bottom: 18px; font-size: 20px;}
.stats-blk { padding: 0 15px; margin-bottom: 20px;}
.stats-blk h4 { font-size: 16px; margin-bottom: 5px;}
.stats-blk small { color: #979797; font-style: italic;}
.stats-blk .progress { height: 8px; margin-top: 2px;}
.tab-listing { width: 100%; margin: 15px 0 0; padding: 0; list-style: none; text-align: center;}
.tab-listing li { display: inline-block; padding: 5px;}
.tab-listing li a { width: 12px; height: 12px; border-radius: 12px; background: #c7c7c7; display: block; opacity: .2; }
.tab-listing li a.active, 
.tab-listing li a:active, 
.tab-listing li a:focus { width: 24px; opacity: 1;}
.tab-data { -webkit-animation: fadeout 2s; -moz-animation: fadeout 2s; -ms-animation: fadeout 2s; -o-animation: fadeout 2s; animation: fadeout 2s;} 
.tab-data.active { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;} 
/* key frames for fadein */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* key frames for fadeout */
@keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Custom JS slider with animated CSS - Codepen plugin - Nishant Dogra #DograsWeblog
#Codepen #FrontEnd #Freebie #Website #UserInterface #HTML #CSS #JavaScript #Plugin
Codepen: https://codepen.io/mrdogra007/pen/YEXXgN
Uplabs: https://www.uplabs.com/posts/custom-js-slider-with-animated-css-codepen-plugin-nishant-dogra