- Posts: 222
- Thank you received: 10
Ask the community, share ideas, and connect with other LimeSurvey users!
<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 }}%
<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 }}%;">
tpartner wrote: You can hard-code your own classes outside of the Twig tag.
Code:<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 }}%;">
You don't, I was just demonstrating that you can add any class.I wonder why I need to add my-custom-class too?
<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 }}%;">
.progress-bar-animated { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
LouisGac wrote: For anyone interested:
"Add .active to .progress-bar-striped to animate the stripes right to left. "
getbootstrap.com/docs/3.3/components/#progress
.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; }