Commit f3c76d3b authored by Michael Iseard's avatar Michael Iseard
Browse files

Animate progress bar

parent 5b71b69e
......@@ -85,9 +85,13 @@ $(() => {
if (target) {
MicroModal.show(target, {
onShow(modal) {
// Clear error message
$(modal)
.find('.kudos_error_message')
.text('')
// Reset and config form
const $form = $(modal).find('.kudos_form')
if ($form.length) {
$('fieldset.current-tab').removeClass(
......@@ -104,6 +108,14 @@ $(() => {
$form.validate().resetForm()
$form[0].reset()
}
// Progress bar
let progressBar = modal.querySelector('.kudos-campaign-progress')
if(progressBar) {
let percent = progressBar.dataset.percent / 100
let bar = progressBar.querySelector('.kudos-progress-bar')
setTimeout(() => bar.style.transform = "scaleX(" + percent + ")", 500)
}
},
awaitCloseAnimation: true,
})
......
{% macro progress(total, current, height='35px') %}
{% set percent = (current / total) * 100 %}
<div class="kudos-campaign-progress kd-flex kd-relative kd-shadow-inner kd-my-4 kd-overflow-hidden kd-bg-gray-200 kd-rounded kd-w-full" style="height: {{ height }}">
<div class="kd-flex kd-px-2 kd-min-w-min kd-justify-center kd-items-center kd-bg-green-500 kd-text-white kd-text-center" style="width:{{ percent }}%">{{ percent | round }}%</div>
{% set percent = ((current / total) * 100) | round %}
<div data-percent="{{ percent }}" class="kudos-campaign-progress kd-flex kd-relative kd-shadow-inner kd-my-4 kd-overflow-hidden kd-bg-gray-200 kd-rounded kd-w-full" style="height: {{ height }}">
<div class="kudos-progress-bar kd-transition-transform kd-duration-1000 kd-ease-in-out kd-origin-bottom-left kd-flex kd-px-2 kd-w-full kd-justify-center kd-items-center kd-bg-green-500 kd-text-white kd-text-center" style="transform: scaleX(0%)"></div>
<div class="kd-absolute kd-top-1/2 kd-right-0 kd-mr-2" style="transform: translateY(-50%)">{{ __('Goal', 'kudos-donations') }}: €{{ total }}</div>
</div>
{% endmacro %}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment