How we can create arrow type progress bar using HTML CSS and JavaScript? Solution: See this CSS Arrow Progress Bar With jQuery, Arrow Type Progress With Tick.
Previously I have shared many types of progress bars, it is different because this is arrow type. A progress bar is used to show the progress of any action or operation. The progress bar can be used in multiple places like a loading screen, registration form, scroll percentage, etc.
Today you will learn to create arrow type progress bar with a tick mark. Basically there is some arrow type progress bar when you click on next it will jump to another arrow. These arrows are like left to the right side, and there are two buttons for next and previous and can navigate using those buttons.
So, Today I am sharing CSS Arrow Progress Bar With jQuery. You also can say it a step by step progress bar because its moves like that, we can place this bar on any elements after some modification. jQuery is a JS library that’s why I am putting this in JavaScript category, libraries made our work easy.
If you are thinking now how this arrow progress bar actually is, then see this preview given below.
Preview Of Arrow-Type Progress With Tick Mark
See this video preview to getting an idea of how this bar looks like.
Now you can see this visually, you also can see it live by pressing the button above. If you like this, then get the source code of its.
You May Also Like:
- JavaScript Email Validation
- Gradient Direction Navigation
- Active Tab Animation Slider
- Grid Menu Layout Design
CSS Arrow Progress Bar With jQuery Source Code
Before sharing source code, let’s talk about it. First I have created 4 divs using HTML because there are four steps. And created two HTML hyperlinks for creating next and previous buttons and also linked jQuery and a google font in HTML file. For the font, I have used a google font and placed in the file.
Now using CSS I have placed all the divs and next previous buttons on the right place. For creating the arrows out and invert corners used CSS :after :before commands (info). After that, placed a tick mark content after the step class. Also there I have used transition, color, radius, and many more other things.
As you know jQuery handling the whole feature because CSS stands for styling and JS for functioning. Using JS I have handled the step function and tick mark after done. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Arrow Progress Bar | Webdevtrick.com</title> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="wrapper"> <div class="arrow-steps clearfix"> <div class="step current"> <span> Step 1</span> </div> <div class="step"> <span>Step 2</span> </div> <div class="step"> <span> Step 3</span> </div> <div class="step"> <span>Step 4</span> </div> </div> <div class="nav clearfix"> <a href="#" class="prev">Previous</a> <a href="#" class="next pull-right">Next</a> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .clearfix:after { clear: both; content: ""; display: block; height: 0; } .container { font-family: 'Lato', sans-serif; width: 100vh; margin: 0 auto; } .wrapper { display: table-cell; height: 400px; vertical-align: middle; } .nav { margin-top: 40px; } .pull-right { float: right; } a, a:active { color: #212121; text-decoration: none; } a:hover { color: #999; } .arrow-steps .step { font-size: 14px; text-align: center; color: #666; cursor: default; margin: 0 3px; padding: 10px 10px 10px 30px; min-width: 180px; float: left; position: relative; background-color: #b4e7ff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background-color 0.2s ease; } .arrow-steps .step:after, .arrow-steps .step:before { content: " "; position: absolute; top: 0; right: -17px; width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 17px solid transparent; border-left: 17px solid #b4e7ff; z-index: 2; transition: border-color 0.2s ease; } .arrow-steps .step:before { right: auto; left: 0; border-left: 17px solid #fff; z-index: 0; } .arrow-steps .step:first-child:before { border: none; } .arrow-steps .step:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .arrow-steps .step span { position: relative; } .arrow-steps .step span:before { opacity: 0; content: "✔"; position: absolute; top: -2px; left: -20px; color: #06ac77; } .arrow-steps .step.done span:before { opacity: 1; -webkit-transition: opacity 0.3s ease 0.5s; -moz-transition: opacity 0.3s ease 0.5s; -ms-transition: opacity 0.3s ease 0.5s; transition: opacity 0.3s ease 0.5s; } .arrow-steps .step.current { color: #fff; background-color: #ff5050; } .arrow-steps .step.current:after { border-left: 17px solid #ff5050; } @media (max-width: 765px) { .arrow-steps .step { min-width: 35px; } } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Code By Webdevtrick ( https://webdevtrick.com ) jQuery( document ).ready(function() { var back =jQuery(".prev"); var next = jQuery(".next"); var steps = jQuery(".step"); next.bind("click", function() { jQuery.each( steps, function( i ) { if (!jQuery(steps[i]).hasClass('current') && !jQuery(steps[i]).hasClass('done')) { jQuery(steps[i]).addClass('current'); jQuery(steps[i - 1]).removeClass('current').addClass('done'); return false; } }) }); back.bind("click", function() { jQuery.each( steps, function( i ) { if (jQuery(steps[i]).hasClass('done') && jQuery(steps[i + 1]).hasClass('current')) { jQuery(steps[i + 1]).removeClass('current'); jQuery(steps[i]).removeClass('done').addClass('current'); return false; } }) }); }) |
That’s It. Now you have successfully created CSS Arrow Progress Bar With jQuery, Arrow Type Progress With Tick. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks a lot