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 |
Progress Button Animation | 3,659 Kb |
Gradient Hover Transition on Buttons | 4,209 Kb |
Google Material Design Nav Submenu Animation | 3,009 Kb |
Handlebars Templates - Example 2 | 1,714 Kb |
Draggable Timeline Demo | 4,548 Kb |
A Pen by EY-Intuitive | 3,258 Kb |
Animated Menu with Submenus | 5,647 Kb |
Xbox One Achievement Unlocked Alert | 4,060 Kb |
Pure CSS3 Flyout Navigation | 3,500 Kb |
Reading Interaction | 2,598 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 |
Beautiful canvas stars | Matths | 2,399 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Gears | Synvox | 3,278 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Simple Flat Menu | Jeplaa | 2,467 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!