JQuery Progress Bar22

Developer
Eric Rogg
Size
6,701 Kb
Views
34,408
  1. JQuery Progress Bar22 Previews
  2. JQuery Progress Bar22 HTML Codes
  3. JQuery Progress Bar22 CSS Codes
  4. JQuery Progress Bar22 JS Codes

How do I make an jquery progress bar22?

A simple jQuery progress bar plugin for Bootstrap forms.. What is a jquery progress bar22? How do you make a jquery progress bar22? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.

JQuery Progress Bar22 Previews
IQ Test

JQuery Progress Bar22 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Progress Bar22</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <form action="" id="sr_form" method="post" name="sr_form"> <ul> <li> <fieldset> <div class="section-title"> How interested are you in learning to solder? </div> <div class="section"> <input max="4" min="0" name="interest" required="" type="range" value="0"> <div class="slider-label1"> No Interest </div> <div class="slider-label1"> A tiny bit </div> <div class="slider-label1"> Some Interest </div> <div class="slider-label1"> Interested </div> <div class="slider-label1"> Very Interested </div> </div> </fieldset> </li> <li> <fieldset> <div class="section-title"> How interested are you in Web Design? </div> <div class="section"> <input max="4" min="0" name="interest" required="" type="range" value="0"> <div class="slider-label-2"> No Interest </div> <div class="slider-label-2"> A tiny bit </div> <div class="slider-label-2"> Some Interest </div> <div class="slider-label-2"> Interested </div> <div class="slider-label-2"> Very Interested </div> </div> </fieldset> </li> <li> <fieldset> <div class="section-title"> How interested are you in Digital Marketing? </div> <div class="section"> <input max="4" min="0" name="interest" required="" type="range" value="0"> <div class="slider-label"> No Interest </div> <div class="slider-label"> Some Interest </div> <div class="slider-label"> Very Interested </div> </div> </fieldset> </li> <li> <fieldset> <div class="section-title"> How interested are you in Mobile Advertising? </div> <div class="section"> <input max="4" min="0" name="interest" required="" type="range" value="0"> <div class="slider-label"> No Interest </div> <div class="slider-label"> Some Interest </div> <div class="slider-label"> Very Interested </div> </div> </fieldset> </li> <li> <fieldset> <div class="section-title"> How interested are you in back-end development? </div> <div class="section"> <input max="4" min="0" name="interest" required="" type="range" value="0"> <div class="slider-label"> No Interest </div> <div class="slider-label"> Some Interest </div> <div class="slider-label"> Very Interested </div> </div> </fieldset> </li> <li> <fieldset> <div class="section-title"> Do you want to make money? </div> <div class="section"></div> <input class="radio-input" id="male" type="radio" name="gender" value="male" required> <label class="radio-label" for="male">Yes</label> <input class="radio-input" id="female" type="radio" name="gender" value="female"> <label class="radio-label" for="female">No</label> </div> </fieldset> </div> </fieldset> </li> <li> <div class="form-group"> <span class="button" name="Submit"></span> </div> </li> </ul> </form><!-- /container --> <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Progress Bar22 - Script Codes CSS Codes

body { margin: 100px;
}
@-webkit-keyframes fill { to { width: 100%; }
}
@-moz-keyframes fill { to { width: 100%; }
}
@-o-keyframes fill { to { width: 100%; }
}
@keyframes fill { to { width: 100%; }
}
ol, ul, li { list-style: none;
}
li { padding: 20px; max-width: 600px; min-height: 1px;
}
li:nth-child(even) { background: #f8f8f8;
}
fieldset fieldset legend { font-size: 1.25em;
}
.jumbotron ul { font-size: .75em;
}
#progress-bar-wrap { min-height: 20px; display: none; margin-bottom: 0;
}
#progress-bar-wrap .encouragement { display: none;
}
#progress-bar-wrap .close:before { content: "\f0d7"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#progress-bar-wrap span { line-height: 1.75em;
}
#progress-bar-wrap .collapsed h4 { font-size: 14px; color: #999999;
}
#progress-bar-wrap .collapsed .encouragement { display: none;
}
#progress-bar-wrap .collapsed .progress { display: none;
}
#progress-bar-wrap .collapsed .close:before { content: "\f0d8"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: .75em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slider-label1 { display: inline-block; float: left; margin-top: 4px; width: 20%; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #A6A6A6;
}
.slider-label1:nth-child(odd) { text-align: left; margin-top: 20px;
}
.slider-label1:last-child { text-align: right;
}
.slider-label-2 { display: inline-block; float: left; margin-top: 4px; width: 20%; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #A6A6A6;
}
.slider-label-2:nth-child(odd) { text-align: left;
}
.slider-label-2:last-child { text-align: right;
}
.slider-label { display: inline-block; float: left; margin-top: 4px; width: 33.33333333333333%; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #A6A6A6;
}
.slider-label:nth-child(odd) { text-align: center;
}
.slider-label:last-child { text-align: right;
}
.section-title { display: block; font-weight: bold; font-size: 1.2em; color: #2f758f; font-family: 'Open Sans','Helvetica','Arial',sans-serif;
}
.scale { text-align: center;
}
.scale td { width: 500px;
}
input[type="range"] { margin-top: 20px; -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; display: inline-block; height: 15px; width: 100%; background: white; display: block; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; -webkit-box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; background-color: #fafafa; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; background: #bed732; height: 15px; width: 15px; border: 4px solid #bed732; border-radius: 20px; box-shadow: 0 0 0 1px #ABC226, 0 0 8px #ABC226 inset; box-sizing: border-box; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]::-webkit-slider-thumb:active { height: 20px; width: 20px; border: 6px solid #bed732; background: white; box-shadow: 0 0 0 1px #ABC226, 0 0 8px transparent inset; cursor: pointer;
}
input[type="range"], ::-moz-range-track, ::-ms-track { -webkit-appearance: none; background-color: #3f91e5; width: 250px; height: 20px;
}
.button { background: #bed732; display: block; height: 60px; font-family: sans-serif; font-size: 20px; font-weight: 100; margin: 50px auto; position: relative; width: 185px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.button:before { color: #FFF; content: attr(name); height: 100%; line-height: 3.1; position: absolute; text-align: center; width: 100%; z-index: 10;
}
.button:after { background: rgba(0, 0, 0, 0.15); content: ''; height: 100%; position: absolute; width: 0;
}
.button:hover { cursor: pointer;
}
.button.animation:after { -webkit-animation: fill .5s forwards ease-out; -moz-animation: fill .5s forwards ease-out; -o-animation: fill .5s forwards ease-out; animation: fill .5s forwards ease-out; left: 0; top: 0; z-index: 5; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.radio-input { position: absolute; visibility: hidden;
}
.radio-label { display: inline-block; float: left; margin-top: 15px; width: 25%; font-size: 10px; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; color: #A6A6A6; cursor: pointer; display: inline-block; font-size: 1.3rem; height: 1.625rem; line-height: 1.625rem; margin-right: 1rem; position: relative; vertical-align: top;
}
.radio-label:before { -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; background-color: #fafafa; border: .1rem solid #eee; border-radius: .8rem; content: ""; display: inline-block; height: 1.6rem; margin-right: .4rem; width: 1.6rem; vertical-align: top; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; box-sizing: border-box; -moz-box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; -webkit-box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; box-shadow: 0 1px 0 white, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
}
input[type=radio]:checked + label:after { background: #bed732; box-shadow: 0 0 0 1px #ABC226, 0 0 8px #ABC226 inset; border-radius: .5rem; content: ''; height: 1rem; left: 0.3rem; position: absolute; top: 0.3rem; width: 1rem;
}

JQuery Progress Bar22 - Script Codes JS Codes

$('.button').click(function() { $(this).toggleClass('animation');
});
$(document).ready(function() {	$('#sr_form').showProgress();	});
(function($) {	$.fn.showProgress = function(options) {	var defaults = {	message: {	'25': 'You\'re doing great so far!',	'50': 'You\'re halfway there!',	'75': 'Look at that, you\'re nearly done already!',	'100': 'All done! Just click <strong>Submit</strong> to continue!'	},	position: 'bottom'	};	options = $.extend(defaults, options);	var markup = '<!-- Progress Bar --><div class="navbar navbar-default navbar-fixed-'+ options.position +'" id="progress-bar-wrap"><div class="container"><h4>Completion Progress <small class="encouragement"></small><button type="button" class="close" data-dismiss="progress-bar" aria-hidden="true" title="Collapse"><span class="sr-only">Collapse</span></button></h4><div class="progress"><div id="form-progress" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">0% Complete</span></div></div></div></div> <!-- /progress bar -->';	$('body').append(markup);	var dismiss = $('button[data-dismiss="progress-bar"]'), radioSiblings = $(this).find('input[type=radio][required], input[type=radio].required').parents('label').siblings().children('input[type=radio]'), input = $(this).find('input[required], select[required], textarea[required], input.required, select.required, textarea.required').add(radioSiblings), magicNumber = 100 / (input.length - radioSiblings.length), pbw = $('#progress-bar-wrap');	dismiss.on('click', function() {	pbw.toggleClass('collapsed', 300);	});	input.data('progress', '0');	input.change(function(){	var $this = $(this),	progressBar = $('#form-progress'),	srText = $('#form-progress > span'),	avn = progressBar.attr('aria-valuenow'),	hasProgress = $this.data('progress'),	siblingInput = $this.parents('label').siblings().children('input'),	siblingName = siblingInput.attr('name'),	encouragement = $('.encouragement');	if (pbw.not(':visible')) {	pbw.show(300);	}	if (hasProgress == '0') {	if ($this.attr('name') == siblingName) {	siblingInput.data('progress', '1');	}	avnMath = parseFloat(avn) + parseFloat(magicNumber);	updateAVN = avnMath.toFixed(3);	pbWidth = updateAVN;	progressBar.width(pbWidth + '%');	progressBar.attr('aria-valuenow', updateAVN);	srText.text(updateAVN + '% Complete');	$this.data('progress', '1');	console.log('AVN is: ' + updateAVN);	} else if (! $this.val() ) { // If the field value is emptied, we need to remove that progress.	$this.data('progress', '0');	avnMath = parseFloat(avn) - parseFloat(magicNumber);	updateAVN = avnMath.toFixed(2);	pbWidth = updateAVN;	progressBar.width(pbWidth + '%');	progressBar.attr('aria-valuenow', updateAVN);	srText.text(updateAVN + '% Complete');	console.log('AVN is: ' + updateAVN);	}	for (var key in options.message) {	keyMatch = parseFloat(key - 5.00);	var value = options.message[key];	if (encouragement.not(':visible')) {	encouragement.show(300);	}	if (updateAVN >= keyMatch) {	encouragement.html(value);	console.log(key + ' : ' + value);	}	}	});	};
})(jQuery);
JQuery Progress Bar22 - Script Codes
JQuery Progress Bar22 - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 3
Size 6,701 Kb
Views 34,408
Do you need developer help for JQuery Progress Bar22?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Rogg (er40) Script Codes
Name
Simple Animated Buttons Inspired by Material Design
CSS Google Loader
Casestudy
Header
Checkbox
Cool Radio
Sign Up Form
Profile CSS Hover Effect
Flat CSS File Icons
Google Play Ratings
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!