Form Progress
How do I make an form progress?
So I saw this awesome shot on Olga Subach's Dribbble. Thought it was pretty nice!. What is a form progress? How do you make a form progress? This script and codes were developed by Robin Brons on 16 September 2022, Friday.
Form Progress - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Progress</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
body { background-color: #e6e6e6; font-family: 'Open Sans', sans-serif;
}
#steps { width: 505px; margin: 50px auto;
}
.step { width: 40px; height: 40px; background-color: white; display: inline-block; border: 4px solid; border-color: transparent; border-radius: 50%; color: #cdd0da; font-weight: 600; text-align: center; line-height: 35px;
}
.step:first-child { line-height: 40px;
}
.step:nth-child(n+2) { margin: 0 0 0 100px; transform: translate(0, -4px);
}
.step:nth-child(n+2):before { width: 75px; height: 3px; display: block; background-color: white; transform: translate(-95px, 21px); content: '';
}
.step:after { width: 150px; display: block; transform: translate(-55px, 3px); color: #818698; content: attr(data-desc); font-weight: 400; font-size: 13px;
}
.step:first-child:after { transform: translate(-55px, -1px);
}
.step.active { border-color: #73b5e8; color: #73b5e8;
}
.step.active:before { background: linear-gradient(to right, #58bb58 0%, #73b5e8 100%);
}
.step.active:after { color: #73b5e8;
}
.step.done { background-color: #58bb58; border-color: #58bb58; color: white;
}
.step.done:before { background-color: #58bb58;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div id="steps"> <div class="step" data-desc="Listing information">1</div> <div class="step" data-desc="Photos & Details">2</div> <div class="step active" data-desc="Review & Post">3</div> <div class="step" data-desc="Your order">4</div>
</div>
<!-- Try adding the active class to another 'step' to see what's going on :)
--> <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 - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
body { background-color: #e6e6e6; font-family: 'Open Sans', sans-serif;
}
#steps { width: 505px; margin: 50px auto;
}
.step { width: 40px; height: 40px; background-color: white; display: inline-block; border: 4px solid; border-color: transparent; border-radius: 50%; color: #cdd0da; font-weight: 600; text-align: center; line-height: 35px;
}
.step:first-child { line-height: 40px;
}
.step:nth-child(n+2) { margin: 0 0 0 100px; transform: translate(0, -4px);
}
.step:nth-child(n+2):before { width: 75px; height: 3px; display: block; background-color: white; transform: translate(-95px, 21px); content: '';
}
.step:after { width: 150px; display: block; transform: translate(-55px, 3px); color: #818698; content: attr(data-desc); font-weight: 400; font-size: 13px;
}
.step:first-child:after { transform: translate(-55px, -1px);
}
.step.active { border-color: #73b5e8; color: #73b5e8;
}
.step.active:before { background: linear-gradient(to right, #58bb58 0%, #73b5e8 100%);
}
.step.active:after { color: #73b5e8;
}
.step.done { background-color: #58bb58; border-color: #58bb58; color: white;
}
.step.done:before { background-color: #58bb58;
}
Form Progress - Script Codes JS Codes
$(document).ready( function() { $('.step').each(function(index, element) { // element == this $(element).not('.active').addClass('done'); $('.done').html('<i class="icon-ok"></i>'); if($(this).is('.active')) { return false; } });
});
Developer | Robin Brons |
Username | bronsrobin |
Uploaded | September 16, 2022 |
Rating | 4.5 |
Size | 3,767 Kb |
Views | 64,768 |
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!
Name | Size |
Pure CSS Radiobuttons | 2,282 Kb |
Chrome Cast Loader | 2,590 Kb |
Raaawr Dinosaur | 3,149 Kb |
CSS Price Table | 2,686 Kb |
Responsive forum | 6,252 Kb |
Pure CSS Arrow | 1,714 Kb |
Wordpress Calendar | 2,886 Kb |
A Pen by Robin Brons | 4,847 Kb |
Thumbnail hover | 3,262 Kb |
Doggie | 2,898 Kb |
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!
Name | Username | Size |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Whyutils | LeYvan | 3,752 Kb |
Ocean | Gordonnl | 2,817 Kb |
Loading animation with css | Icebob | 2,947 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
STIKHOI | Denmch | 7,122 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!