- {% include section-header.html name="expressive-loader" version=page.module_metadata.expressive-loader.ds-component.version %}
-
-
- The expressive loader can replace our traditional spinner to feel faster during periods of longer loading.
- To portray responsive and quicker loads, the expressive loader's design uses visual momentum to
- indicate progression across refreshing, page loading and user actions. It consists of an animated progress bar in various colors and an optional set of messages that are cycled into view.
-
-
- The expressive loader also renders different experiences depending on the prefers-reduced-motion media query. Toggle your reduced motion settings to view examples with the default behavior and reduced motion behavior.
-
-
-
- Default Expressive Loader
-
-
-
- The base expressive loader consists of a progressbar with 12 lines of varying widths. Each line has a width of 10% - 40% of its container, with each set of four lines adding up to 100% width. You can use JavaScript to randomly generate the line widths, though it's not required.
-
-
-
- In the default behavior, lines scale up from 0% to their defined width and move horizontally across the screen.
- When the user prefers reduced motion, the lines still animate. However, instead of growing from 0% to their defined width,
- they stay a fixed size and scroll more slowly across the screen.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% endhighlight %}
-
-
- Expressive Loader with Single Message
-
-
- If there is only one message, add the
- expressive-loader__message--in class to its status element to animate it in.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% endhighlight %}
-
-
- Expressive Loader with Multiple Messages
-
-
- The following examples demonstrate cycling through messages using JavaScript. Note that JavaScript is not bundled with Skin,
- so you will need to write your own js implementation of this pattern.
- We have outlined the steps below so you can recreate them in your JavaScript framework of choice.
-
-
-
Default behavior
-
- To cycle a message into view in the default mode:
-
- - Animate in the message:
-
- - Put the message content in the aria-hidden element with class expressive-loader__message. This element is used just for the visual message animation; it is not read to screen readers.
- - Add the expressive-loader__message--in class to animate that message into view.
-
-
- -
- After the message animates in:
-
- -
- Put the message content in the status element with class expressive-loader__message. This will read the message aloud to screen reader users.
-
- -
- Remove the expressive-loader__message--in class from the aria-hidden element.
-
-
-
- -
- After a fixed amount of time, add the expressive_loader__message--out class
- to the current message to animate it out of view. This can happen concurrently with the next message animating in.
-
-
-
-
-
- Reduced motion behavior
-
-
- When @media (prefers-reduced-motion: reduce), there is no transition state between messages, so the aria-hidden message is not needed.
- To fade in the first message, add the expressive-loader__message--initial class to the status element. For all subsequent messages, remove the expressive-loader__message--initial class and simply update the content in the status element.
-
-
-
-
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% endhighlight %}
-
-
-
- Medium text
-
-
- By default, the expressive loader displays with large text. For smaller text, apply
- the expressive-loader--medium class to the message container.
-
-
-
-
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}
-
-
-
- We're finishing your order.
-
-
- Hang tight.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% endhighlight %}
-
-
-
+ {% include section-header.html name="progress-bar-expressive" version=page.module_metadata.progress-bar-expressive.ds-component.version %}
+
+
+ The expressive progress bar can replace our traditional spinner to feel faster during periods of longer loading.
+ To portray responsive and quicker loads, the expressive loader's design uses visual momentum to
+ indicate progression across refreshing, page loading and user actions. It consists of an animated progress bar in various colors and an optional set of messages that are cycled into view.
+
+
+ The expressive progress bar also renders different experiences depending on the prefers-reduced-motion media query. Toggle your reduced motion settings to view examples with the default behavior and reduced motion behavior.
+
+
+
+ Default Expressive Progress Bar
+
+
+
+ The base expressive loader consists of a progressbar with 12 lines of varying widths. Each line has a width of 10% - 40% of its container, with each set of four lines adding up to 100% width. You can use JavaScript to randomly generate the line widths, though it's not required.
+
+
+
+ In the default behavior, lines scale up from 0% to their defined width and move horizontally across the screen.
+ When the user prefers reduced motion, the lines still animate. However, instead of growing from 0% to their defined width,
+ they stay a fixed size and scroll more slowly across the screen.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% endhighlight %}
+
+
+ Expressive Progress Bar with Single Message
+
+
+ If there is only one message, add the
+ progress-bar-expressive__message--in class to its status element to animate it in.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% endhighlight %}
+
+
+ Expressive Progress Bar with Multiple Messages
+
+
+ The following examples demonstrate cycling through messages using JavaScript. Note that JavaScript is not bundled with Skin,
+ so you will need to write your own js implementation of this pattern.
+ We have outlined the steps below so you can recreate them in your JavaScript framework of choice.
+
+
+
Default behavior
+
+ To cycle a message into view in the default mode:
+
+ - Animate in the message:
+
+ - Put the message content in the aria-hidden element with class progress-bar-expressive__message. This element is used just for the visual message animation; it is not read to screen readers.
+ - Add the progress-bar-expressive__message--in class to animate that message into view.
+
+
+ -
+ After the message animates in:
+
+ -
+ Put the message content in the status element with class progress-bar-expressive__message. This will read the message aloud to screen reader users.
+
+ -
+ Remove the progress-bar-expressive__message--in class from the aria-hidden element.
+
+
+
+ -
+ After a fixed amount of time, add the expressive_loader__message--out class
+ to the current message to animate it out of view. This can happen concurrently with the next message animating in.
+
+
+
+
+
+ Reduced motion behavior
+
+
+ When @media (prefers-reduced-motion: reduce), there is no transition state between messages, so the aria-hidden message is not needed.
+ To fade in the first message, add the progress-bar-expressive__message--initial class to the status element. For all subsequent messages, remove the progress-bar-expressive__message--initial class and simply update the content in the status element.
+
+
+
+
+
+
+
+ We're finishing your order.
+
+
+ Hang tight.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% highlight html %}
+
+
+
+ We're finishing your order.
+
+
+ Hang tight.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% endhighlight %}
+
+
+
+ Medium text
+
+
+ By default, the expressive progress bar displays with large text. For smaller text, apply
+ the progress-bar-expressive--medium class to the message container.
+
+
+
+
+
+
+
+ We're finishing your order.
+
+
+ Hang tight.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% highlight html %}
+
+
+
+ We're finishing your order.
+
+
+ Hang tight.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% endhighlight %}
+
+
+