Form Progress Bar

Developer
Adam Grayson
Size
4,644 Kb
Views
14,168
  1. Form Progress Bar Previews
  2. Form Progress Bar HTML Codes
  3. Form Progress Bar CSS Codes
  4. Form Progress Bar JS Codes

How do I make an form progress bar?

Click next or previous, watch the progress bar animate to reflect the current step the user is on.. What is a form progress bar? How do you make a form progress bar? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Form Progress Bar Previews
IQ Test

Form Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Progress Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pagination-container full-width-container"> <div class="sized-container"> <div class="pagination"></div> </div>
</div>
<div class="viewport full-width-container"> <ul class="slide-container"> <li class="slide" data-tag="Basic Info"> <div class="sized-container"> <h1>Lets start with some basics.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="Expertise"> <div class="sized-container"> <h1>Tell us about your area of expertise.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="About Me"> <div class="sized-container"> <h1>Lets get a little more in depth.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="Experience"> <div class="sized-container"> <h1>Tell us about where you've worked before.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="Education"> <div class="sized-container"> <h1>Describe your formal education.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="Additional"> <div class="sized-container"> <h1>Mention any additional comments.</h1> <h2>Information about this section.</h2> </div> </li> <li class="slide" data-tag="Confirm"> <div class="sized-container"> <h1>Confirm your application.</h1> <h2>Information about this section.</h2> </div> </li> </ul>
</div>
<div class="full-width-container"> <div class="button-container sized-container"> <button class="next">next</button> <button class="previous">previous</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form Progress Bar - Script Codes CSS Codes

@charset "UTF-8";
*, html, body { font-family: "TrebuchetMS", trebuchet, sans-serif;
}
* { box-sizing: border-box;
}
h1, h2 { text-align: center;
}
h1 { font-size: 24px; line-height: 30px; font-weight: bold;
}
h2 { font-size: 18px; line-height: 25px; margin-top: 20px;
}
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 14px 50px; border-radius: 4px; background-color: #37B595; color: #FFFFFF; text-transform: capitalize; font-size: 18px; line-height: 22px; outline: none; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s;
}
button:hover { background-color: #1A7F75;
}
button.previous { background-color: #A2ACAF;
}
button.previous:hover { background-color: #5A5F61;
}
.full-width-container { width: 100%; min-width: 320px;
}
.sized-container { max-width: 900px; width: 100%; margin: 0 auto;
}
.slide-container { position: relative; left: 0; overflow: hidden;
}
.slide { float: left;
}
.slide .sized-container { padding: 75px 25px;
}
.button-container { border-top: 1px solid black; overflow: hidden; padding-top: 30px;
}
.button-container button { float: right; margin-left: 30px;
}
.pagination-container { margin-top: 120px;
}
.pagination { width: 100%; text-align: center; padding: 0 25px;
}
.indicator { width: 25px; height: 25px; border: 4px solid lightgray; border-radius: 50%; display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative;
}
.indicator .tag { position: absolute; top: -30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: lightgray; white-space: nowrap;
}
.indicator.active, .indicator.complete { border-color: #37B595;
}
.indicator.active .tag, .indicator.complete .tag { color: #37B595;
}
.indicator.complete:after { content: "✓"; position: absolute; color: #37B595; left: 4px; top: 3px; font-size: 14px;
}
.progress-bar-container { width: 10%; height: 4px; display: inline-block; background-color: lightgray; position: relative; top: -10px;
}
.progress-bar-container:last-of-type { display: none;
}
.progress-bar-container .progress-bar { width: 0; height: 100%; background-color: #37B595;
}

Form Progress Bar - Script Codes JS Codes

var currentSlide = 0, $slideContainer = $('.slide-container'), $slide = $('.slide'), slideCount = $slide.length, animationTime = 300;
function setSlideDimensions () { var windowWidth = $(window).width(); $slideContainer.width(windowWidth * slideCount); $slide.width(windowWidth);
}
function generatePagination () { var $pagination = $('.pagination'); for(var i = 0; i < slideCount; i ++){ var $indicator = $('<div>').addClass('indicator'), $progressBarContainer = $('<div>').addClass('progress-bar-container'), $progressBar = $('<div>').addClass('progress-bar'), indicatorTagText = $slide.eq(i).attr('data-tag'), $tag = $('<div>').addClass('tag').text(indicatorTagText); $indicator.append($tag); $progressBarContainer.append($progressBar); $pagination.append($indicator).append($progressBarContainer); } $pagination.find('.indicator').eq(0).addClass('active');
}
function goToNextSlide () { if(currentSlide >= slideCount - 1) return; var windowWidth = $(window).width(); currentSlide++; $slideContainer.animate({ left: -(windowWidth * currentSlide) }); setActiveIndicator(); $('.progress-bar').eq(currentSlide - 1).animate({ width: '100%' }, animationTime);
}
function goToPreviousSlide () { if(currentSlide <= 0) return; var windowWidth = $(window).width(); currentSlide--; $slideContainer.animate({ left: -(windowWidth * currentSlide) }, animationTime); setActiveIndicator(); $('.progress-bar').eq(currentSlide).animate({ width: '0%' }, animationTime);
}
function postitionSlides () { var windowWidth = $(window).width(); setSlideDimensions(); $slideContainer.css({ left: -(windowWidth * currentSlide) }, animationTime);
}
function setActiveIndicator () { var $indicator = $('.indicator'); $indicator.removeClass('active').removeClass('complete'); $indicator.eq(currentSlide).addClass('active'); for(var i = 0; i < currentSlide; i++){ $indicator.eq(i).addClass('complete'); }
}
setSlideDimensions();
generatePagination();
$(window).resize(postitionSlides);
$('.next').on('click', goToNextSlide);
$('.previous').on('click', goToPreviousSlide);
Form Progress Bar - Script Codes
Form Progress Bar - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 4
Size 4,644 Kb
Views 14,168
Do you need developer help for Form Progress Bar?

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!

Adam Grayson (agrayson) Script Codes
Name
Sliding Lines Animation
Drag and Drop File Preview
Multi-Column Responsive Carousel
Playing Animations on Scroll
Random Weapon Generator
Dynamic circle menus with SASS
Responsive square grid in pure CSS
Spinning Circles
Centered background Image with hot spots
Custom Select Element
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!