Learn how to build a progress component with any shape you need using the SVG with the phenix javascript progress plugin.
the progress bar is built with HTML and css and its shifting shapes with javascript and SVG drawing a shape that you can fill with color and the type of shape you need circle, radial or custom-shape.
in the next example you can learn how to build a progress bar, first, we created an HTML .px-progress element after that we did run phenix progress() plugin on it, and you can use the data-attributes options instead of js options for defining your progress value, color, size, label and here we are doing the default setup of the progress through HTML and javascript
<!-- Main Label -->
<label class="mb-5 fs-13">Default Progress Bar</label>
<!-- Progress -->
<div class="px-progress fs-12 mb-30" data-value="20"></div>
<!-- Main Label -->
<label class="mb-5 fs-13">Labeled with Value</label>
<!-- Progress -->
<div class="px-progress fs-12 radius-sm mb-30" data-value="50" data-label="value"></div>
<!-- Main Label -->
<label class="mb-5 fs-13">Resized & Custom Label</label>
<!-- Progress -->
<div class="px-progress fs-12 radius-rounded mb-30" data-value="75" data-size="25" data-label="Loading"></div>
<!-- // Progress -->
//====> Progress <====//
Phenix('.px-progress').progress({
type: 'bar', //===> Timer Type [bar, circle, radial]
color: 'css color', //===> the Progress Color
value: number, //===> the Progress value
label: string, //===> the progress label
size:number, //===> the size of the progress with px
lazyloading: false, //====> Animate when its visible
});
in the next example, you can see the progress start only when the user arrives at it and it’s visible to him on the screen with the attribute data-lazy or lazyloading js option.
<!-- Progress -->
<div class="px-progress fs-12 radius-sm mb-30" data-value="40" data-label="value" data-lazy="0"></div>
in the example below you can see the progress with different colors set to each of them with data-color option and its available as a js option to change the color of the progress bar with a valid css color #hex, rgb, variables.
<!-- Grid -->
<div class="row">
<!-- Column -->
<div class="col-12 col-md-6 col-lg-4">
<!-- Main Label -->
<label class="mb-5 fs-13">Colored Progress Bar</label>
<!-- Progress -->
<div class="px-progress fs-12 mb-30" data-value="20" data-lazy="0" data-color="var(--danger-color)" ></div>
</div>
<!-- Column -->
<div class="col-12 col-md-6 col-lg-4">
<!-- Main Label -->
<label class="mb-5 fs-13">Labeled with Value</label>
<!-- Progress -->
<div class="px-progress fs-12 radius-sm mb-30" data-value="40" data-label="value" data-color="var(--info-color)" data-lazy="0"></div>
</div>
<!-- Column -->
<div class="col-12 col-md-6 col-lg-4">
<!-- Main Label -->
<label class="mb-5 fs-13">Custom Label</label>
<!-- Progress -->
<div class="px-progress fs-12 radius-rounded mb-30" data-value="50" data-label="lazy-Loading" data-color="var(--success-color)" data-lazy="0"></div>
</div>
<!-- // Column -->
</div>
<!-- // Grid -->
//====> Progress <====//
Phenix('.px-progress').progress({color: "var(--primary-color)"});
in the example below you can learn how to increase and decrease the value of the progress just by running the plugin on the progress you already have without rebuilding the markup or anything.
<!--Label -->
<label class="mb-5 fs-13">Labeled with Value</label>
<!-- Progress -->
<div id="progress-controlled" class="px-progress fs-12 radius-sm mb-15" data-value="0" data-size="30" data-label="value"></div>
<!-- Buttons -->
<button class="btn primary tiny radius-sm" id="decrease-progress">Decrease</button>
<button class="btn primary tiny radius-sm" id="increase-progress">Increase</button>
<!-- Progress JS -->
<script defer>
//======> D.O.M is Ready <=======//
document.addEventListener('DOMContentLoaded',(event) => {
//====> Build Progress <====//
Phenix('.px-progress').progress();
//====> .Increase. <====//
Phenix('#increase-progress').on('click', clicked => {
//===> Current Value <===//
let progress = document.querySelector('#progress-controlled'),
current = parseInt(progress.getAttribute('data-value'));
//===> Increase the Value <===//
progress.setAttribute('data-value', current+5);
//===> Update Progress <===//
Phenix(progress).progress();
});
//====> .Decrease. <====//
Phenix('#decrease-progress').on('click', clicked => {
//===> Current Value <===//
let progress = document.querySelector('#progress-controlled'),
current = parseInt(progress.getAttribute('data-value'));
//===> Decrease the Value <===//
progress.setAttribute('data-value', current-5);
//===> Update Progress <===//
Phenix(progress).progress();
});
});
</script>
<!-- Progress JS -->
<!-- Label -->
<label class="mb-5 fs-13">Colorful Progress</label>
<!-- Progress -->
<div id="progress-colorful" class="px-progress fs-12 radius-sm mb-15" data-value="15" data-size="30" data-label="value" data-color="var(--warning-color)"></div>
<!-- Buttons -->
<div class="flexbox align-between align-center">
<button class="btn primary tiny radius-sm" id="decrease-colorful">Decrease</button>
<span class="fs-12">increase to change colors</span>
<button class="btn primary tiny radius-sm" id="increase-colorful">Increase</button>
</div>
<!-- Progress JS -->
<script defer>
//======> D.O.M is Ready <=======//
document.addEventListener('DOMContentLoaded',(event) => {
//====> Build Progress <====//
Phenix('.px-progress').progress();
//====> Changes Updater <====//
let progress_updater = (progress, value) => {
//===> Convert to Number <===//
let new_value = parseInt(value);
//===> Change the Value <===//
progress.setAttribute('data-value', new_value);
//===> Change to Red <===//
if (new_value > 0 && new_value < 20) progress.setAttribute('data-color', 'var(--danger-color)');
//===> Change to Yellow <===//
if (new_value > 15 && new_value < 50) progress.setAttribute('data-color', 'var(--warning-color)');
//===> Change to Blue <===//
if (new_value > 45 && new_value < 65) progress.setAttribute('data-color', 'var(--primary-color)');
//===> Change to Purple <===//
if (new_value > 60 && new_value < 90) progress.setAttribute('data-color', 'var(--info-color)');
//===> Change to Green <===//
if (new_value > 90) progress.setAttribute('data-color', 'var(--success-color)');
//===> Change Label When is Complete <===//
if (new_value == 100) {
progress.setAttribute('data-label', 'Completed');
} else {
progress.setAttribute('data-label', 'value');
}
//===> Update Progress <===//
Phenix(progress).progress();
}
//====> .Increase. <====//
Phenix('#increase-colorful').on('click', clicked => {
//===> Current Value <===//
let progress = document.querySelector('#progress-colorful'),
current = parseInt(progress.getAttribute('data-value')),
inceased_value = current < 100 ? current+5 : current;
//===> Update Progress <===//
progress_updater(progress, inceased_value);
});
//====> .Decrease. <====//
Phenix('#decrease-colorful').on('click', clicked => {
//===> Current Value <===//
let progress = document.querySelector('#progress-colorful'),
current = parseInt(progress.getAttribute('data-value')),
deceased_value = current > 5 ? current-5 : current;
//===> Update Progress <===//
progress_updater(progress, deceased_value);
});
});
</script>
<!-- Progress JS -->