diff --git a/core/includes/batch.inc b/core/includes/batch.inc index 7d905cd..5343920 100644 --- a/core/includes/batch.inc +++ b/core/includes/batch.inc @@ -165,6 +165,7 @@ '#percent' => $percentage, '#message' => $message, '#label' => $label, + '#animate' => TRUE, '#attached' => array( 'html_head' => array( array( diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 9ce21ff..46f5f56 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1869,7 +1869,7 @@ 'variables' => array('url' => NULL, 'title' => NULL), ), 'progress_bar' => array( - 'variables' => array('label' => NULL, 'percent' => NULL, 'message' => NULL), + 'variables' => array('label' => NULL, 'percent' => NULL, 'message' => NULL, 'animate' => TRUE), ), 'indentation' => array( 'variables' => array('size' => 1), @@ -1960,3 +1960,15 @@ ), ); } + +/** + * Implements hook_preprocess_HOOK() for the progress bar. + */ +function template_preprocess_progress_bar(&$variables) { + // Allow ajax version of progress to be animated. + // @see progress.js + $variables['#attached']['js'][] = array( + 'type' => 'setting', + 'data' => array('progressBarAnimate' => $variables['animate']), + ); +} \ No newline at end of file diff --git a/core/misc/progress.js b/core/misc/progress.js index 52127e6..32090eb 100644 --- a/core/misc/progress.js +++ b/core/misc/progress.js @@ -22,7 +22,8 @@ // have completed their current activity and not interrupt the screen reader. this.element = $('
').attr('id', id); this.element.html('
 
' + - '
' + + '
' + '
' + '
 
'); }; diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index e520523..3fb0648 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -315,6 +315,9 @@ padding: 0 1px; height: 16px; border-radius: 10em; +} + +.progress__bar--animate { -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; -webkit-transition: width 0.5s ease-out; diff --git a/core/modules/system/templates/progress-bar.html.twig b/core/modules/system/templates/progress-bar.html.twig index 885a80f..93852df 100644 --- a/core/modules/system/templates/progress-bar.html.twig +++ b/core/modules/system/templates/progress-bar.html.twig @@ -9,6 +9,10 @@ * - label: The label of the working task. * - percent: The percentage of the progress. * - message: A string containing information to be displayed. + * - animate: If set, enable the progress bar animation. + * + * @see template_preprocess_progress_bar() + * @see progress.js * * @ingroup themeable */ @@ -17,7 +21,7 @@ {% if label %}
{{ label }}
{% endif %} -
+
{{ percent }}%
{{ message }}