Progress bar animation

Mehr
11 Monate 4 Wochen her #168977 von krosser
COM_KUNENA_MESSAGE_CREATED_NEW
Hi guys,

I am trying to animate the progress bar similar to this...





Since the Vanilla template is based on Bootstrap, it should work. But in the progress_bar.twig file the class is set in a different way.


class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }}
<div class="{{ aSurveyInfo.class.progressbar  }}" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">
                        {{ progressValue }}%


I cannot even experiment with different codes, as when I add anything to aSurveyInfo.class.progressbar, I get an error - Unexpected token "name" of value "aSurveyInfo" ("end of print statement" expected) - and cannot access the extended theme anymore.


So, if anyone has done this before, please share what should be added and where. Thanks.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

LimeSurvey Partners
Mehr
11 Monate 4 Wochen her #168981 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
You can hard-code your own classes outside of the Twig tag.

<div class="{{ aSurveyInfo.class.progressbar  }} progress-bar-striped progress-bar-animated krossers-custom-class" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Folgende Benutzer bedankten sich: LouisGac, krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her - 11 Monate 4 Wochen her #168985 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW

tpartner schrieb: You can hard-code your own classes outside of the Twig tag.

<div class="{{ aSurveyInfo.class.progressbar  }} progress-bar-striped progress-bar-animated krossers-custom-class" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">


Oh my! So that is the reason - placing the code outside the Twig tag! :)

I wonder why I need to add my-custom-class too? Because just by adding progress-bar-striped progress-bar-animated it works...

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Last edit: 11 Monate 4 Wochen her by krosser.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #168986 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW

I wonder why I need to add my-custom-class too?

You don't, I was just demonstrating that you can add any class.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Folgende Benutzer bedankten sich: krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #168997 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW
Alright, so for anyone who might need this in the future, follow these steps:

1. Change this line in progress_bar.twig:



<div class="{{ aSurveyInfo.class.progressbar  }} progress-bar-striped progress-bar-animated" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">

2. In custom.css add this:
.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #168998 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW
My only fear is that this change would be negated when the LS team updates the themes and twig files would be updated. I would have to keep an eye on that.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169001 von holch
COM_KUNENA_MESSAGE_REPLIED_NEW
If you make the chances in a copy of the theme (or better extend the theme) you should be fine. Changes should only be applied to the standard theme which is then overwritten with your extended theme information where necessary.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Folgende Benutzer bedankten sich: krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169003 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
Yes, exactly. Never edit the core theme files. Extend the theme and copy any required Twig files to your new theme directory. Twig files in your extended theme directory will not be affected by updates.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169011 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW
Okay, that is what I do - extend themes and make changes there. Actually, when you use the LS on their servers, the editor does not allow you to edit a theme without extending it first.
I just thought that any updates to the core themes would rewrite twig files in the extended ones. Good to know that it is not an issue.
Thank you guys!

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169044 von LouisGac
COM_KUNENA_MESSAGE_REPLIED_NEW
just to say: we're using Bootstrap 3, not Bootstrap 4
getbootstrap.com/docs/3.3/

so Bootstrap 4 snippets will not work...
Folgende Benutzer bedankten sich: tpartner

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her - 11 Monate 4 Wochen her #169049 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW
Thanks for the reminder but for some reason that code worked. I will have a look at how it is done in 3.3.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Last edit: 11 Monate 4 Wochen her by krosser.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169050 von LouisGac
COM_KUNENA_MESSAGE_REPLIED_NEW
For anyone interested:

"Add .active to .progress-bar-striped to animate the stripes right to left. "

getbootstrap.com/docs/3.3/components/#progress
Folgende Benutzer bedankten sich: tpartner, krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 4 Wochen her #169065 von krosser
COM_KUNENA_MESSAGE_REPLIED_NEW

LouisGac schrieb: For anyone interested:

"Add .active to .progress-bar-striped to animate the stripes right to left. "

getbootstrap.com/docs/3.3/components/#progress


Works :)
In this case, the CSS code for custom.css would be
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-moz-animation: progress-bar-stripes 1s linear infinite;
  -o-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha