Step Indicator
How do I make an step indicator?
Step indicator animates progress when clicking a step (circle). Clicking again deselects past that point. Inspired by similar behavior encountered in mobile apps.. What is a step indicator? How do you make a step indicator? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.
Step Indicator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Step Indicator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ .container { width: 50%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle { display: inline-block; position: relative; border-radius: 50%; padding: 0; margin-right: -16px; margin-left: -3px; width: 40px; height: 40px; background-color: #7190d6; z-index: 2;
}
.circle-small { border-radius: 50%; background-color: white; margin-top: 20%; margin-left: 20%; width: 24px; height: 24px;
}
.divider { display: inline-block; margin-right: -4px; margin-left: -2px; margin-bottom: 14px; width: 14%; height: 12px; background-color: #7190d6;
}
.overlay { display: none; width: 0; height: 12px; position: absolute; background-color: #ba0163; z-index: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="circle"> <div class="circle-small"></div> </div> <div class="overlay"></div> <div class="divider"></div> <div class="circle"> <div class="circle-small"></div> </div> <div class="overlay"></div> <div class="divider"></div> <div class="circle"> <div class="circle-small"></div> </div> <div class="overlay"></div> <div class="divider"></div> <div class="circle"> <div class="circle-small"></div> </div> <div class="overlay"></div> <div class="divider"></div> <div class="circle"> <div class="circle-small"></div> </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>
Step Indicator - Script Codes CSS Codes
.container { width: 50%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.circle { display: inline-block; position: relative; border-radius: 50%; padding: 0; margin-right: -16px; margin-left: -3px; width: 40px; height: 40px; background-color: #7190d6; z-index: 2;
}
.circle-small { border-radius: 50%; background-color: white; margin-top: 20%; margin-left: 20%; width: 24px; height: 24px;
}
.divider { display: inline-block; margin-right: -4px; margin-left: -2px; margin-bottom: 14px; width: 14%; height: 12px; background-color: #7190d6;
}
.overlay { display: none; width: 0; height: 12px; position: absolute; background-color: #ba0163; z-index: 1;
}
Step Indicator - Script Codes JS Codes
var defaultBackground = '#7190d6', selectedBackground = '#ba0163', backgroundCss = 'background-color', circleRef = '.circle', overlayRef = '.overlay';
// Is the circle selected
function isSelected($circle, defaultColor){ return defaultColor !== $circle.css(backgroundCss);
}
// Return the overlay to animate
function getOverlay($circle){ var $overlays = $circle.prevAll(overlayRef), $overlay; if($overlays.length > 0){ // get the closest hidden div $overlay = $overlays.first(); } return $overlay;
}
// Reset overlay to its original state
function resetOverlay($overlay){ $overlay.hide(); $overlay.css('width',0);
}
// Trigger the update for the circle
function update(circle, target){ if(circle){ $(circle).trigger('update',[target]); }
}
$.each($(circleRef), function(index, circle){ // Track default background color as it's returned as an // RGB in most browsers var defaultColor = $(circle).css(backgroundCss); // Store a reference to the index to use when this circle is // the click target $(circle).data('index',index); $(circle).on('update', function(event, target){ var $circle = $(this), targetIdx = $(target).data('index'), circleNext = $circle.nextAll(circleRef).first(); if(isSelected($circle, defaultColor)){ // Don't deselect a circle that exists prior to // the target circle if(index >= targetIdx){ resetOverlay($circle.next()); $circle.css(backgroundCss, defaultBackground); var $overlay = getOverlay($circle); if($overlay && $overlay.length > 0){ resetOverlay($overlay); } } // trigger update on the next circle update(circleNext,target); }else if(index <= targetIdx){ var $overlay = getOverlay($circle); if($overlay && $overlay.length > 0){ var p = $overlay.next().position(); $overlay.css('left',p.left); $overlay.css('top',p.top); $overlay.show(); $overlay.animate({ width: $overlay.next().css('width') },{ duration: 200, complete : function() { $circle.css(backgroundCss, selectedBackground); update(circleNext, target); } }); }else{ $circle.css(backgroundCss, selectedBackground); update(circleNext, target); } } });
});
$(circleRef).on('click', function(event){ // Trigger update on the first circle update($(circleRef).first(),this);
});
Developer | EY-Intuitive |
Username | ey_intuitive |
Uploaded | January 17, 2023 |
Rating | 3 |
Size | 3,692 Kb |
Views | 6,072 |
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 |
Awesome Full Page Menu Nav | 4,194 Kb |
Hidden Push Nav with Flyouts | 3,948 Kb |
Animated Menu with Submenus | 5,647 Kb |
UI Color Shade Previewer | 3,159 Kb |
Awesome Search Button with Input Animation | 3,633 Kb |
Underscore templates - Example 3 | 2,568 Kb |
Draggable Timeline Demo | 4,548 Kb |
Gradient Hover Transition on Buttons | 4,209 Kb |
Jquery Flyout Navigation | 2,667 Kb |
Button Text Color Accessibility Mixin Test | 4,555 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 |
P1 | Vivi_Lai | 1,533 Kb |
Pure css thumbnails hover | Ksksoft | 1,773 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 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!