Paano to gawing responsive ang progress bar? na palagi siyang center sa Business Information yung circle sa word kapag nag zoom in or out?
80% zoom tama naman siya nasa center sa word:
70% zoom hindi na siya center sa mga words na header:
css code:
html code:
javascript code:
80% zoom tama naman siya nasa center sa word:
70% zoom hindi na siya center sa mga words na header:
css code:
CSS:
/*Progress Bar Step*/
:root {
--line-border-fill: #3498db;
--line-border-empty: #e0e0e0;
}
* {
box-sizing: border-box;
}
/* Main container Progress bar Step */
.parent-container {
display: flex;
justify-content: center;
align-items: center;
height: 5vh; /* You may adjust the height to match your layout */
}
.container1 {
text-align: center;
}
.progress-container-step {
display: flex;
justify-content: space-between;
position: relative;
margin-left: 200px;
max-width: 100%;
width: 850px;
}
.progress-container-step::before {
content: ""; /* Mandatory with ::before */
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 10px;
width: 100%;
z-index: 1;
}
.progress-step {
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 7px;
width: 0%;
z-index: 1;
transition: 0.4s ease;
}
.circle {
background-color: #fff;
color: #999;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 5px solid var(--line-border-empty);
transition: 0.4s ease;
position: relative; /* Add this line to position the circles above the line */
z-index: 1; /* Add this line to position the circles above the line */
}
.circle.active {
border-color: var(--line-border-fill);
background: linear-gradient(to bottom, #99ccff 0%, #ffffcc 100%);
color: #080808;
}
html code:
HTML:
<div class="parent-container">
<div class="container1">
<div class="progress-container-step">
<div class="progress-step" ng-style="progressStyle"></div>
<div class="circle" ng-class="{ 'active': isActive(index) }" ng-repeat="(index, circle) in circles">{{ index + 1 }}</div>
</div>
</div>
</div>
HTML:
<div class="card-header p-2">
<ul class="nav nav-*****">
<li class="nav-item"><a class="nav-link active" href="#businessinfo" data-toggle="tab" ng-click="setStep(1)"><i class="fas fa-globe mb-1"> </i>Business Information</a></li>
<li class="nav-item"><a class="nav-link" href="#businessdocs" data-toggle="tab" ng-click="setStep(2)"><i class="fas fa-briefcase mb-1"> </i>Business Registration</a></li>
<li class="nav-item"><a class="nav-link" href="#contactdet" data-toggle="tab" ng-click="setStep(3)"><i class="fas fa-fax mb-1"> </i>Contact Details</a></li>
<li class="nav-item"><a class="nav-link" href="#productdetails" data-toggle="tab" ng-click="setStep(4)"><i class="fas fa-percentage mb-1"> </i>Product Details & Discounts</a></li>
<li class="nav-item"><a class="nav-link" href="#scanneddocs" data-toggle="tab" ng-click="setStep(5)"><i class="fas fa-image mb-1"> </i>Scanned Documents</a></li>
</ul>
</div>
javascript code:
JavaScript:
//Progress Bar Step
$scope.progressStyle = { width: "0%" };
$scope.currentActive = 1;
$scope.circles = [1, 2, 3, 4, 5];
$scope.update = function () {
var activeCount = $scope.currentActive - 1;
$scope.progressStyle = { width: (activeCount / ($scope.circles.length - 1)) * 100 + "%" };
};
$scope.isActive = function (index) {
return index < $scope.currentActive;
};
$scope.setStep = function (step) {
$scope.currentActive = step;
$scope.update();
};
// Initial update
$scope.update();
Attachments
-
You do not have permission to view the full content of this post. Log in or register now.