Download List

A list of downloadable files.

How to

The Download List component is used to display a list of downloadable items.

To animate the download button, add the following classes to the .dow-list__btn element:

• dow-list__btn--is-loading for the loading animation;
• dow-list__btn--success for the success animation;
• dow-list__btn--error for the error animation.

To start the success/error final step of the animation at the propert time, take in mind the duration of the circle loader animation is 1s, and it starts after .6s.

Example:

1. The user starts the animation by clicking the download button
2. After .6s (the duration of the arrow animation), the circle loader animations starts and the duration of each loop is 1s
3. Let's assume the download is complete 1.2s after the click on the button → to complete the animation without an abrupt interruption, add the success/error class modifiers after .4s

To reset the button after the download animation is over, use the .dow-list__btn--reset class:

Util.addClass(btn, 'dow-list__btn--reset');
var delay = parseFloat(getComputedStyle(btn).getPropertyValue('--hover-transition-duration'))*1000;
// wait for the reset transition end before removing all animation classes
setTimeout(function(){
  Util.removeClass(btn, 'dow-list__btn--is-loading dow-list__btn--success dow-list__btn--error');
  setTimeout(function(){Util.removeClass(btn, 'dow-list__btn--reset');}, 10);
}, delay);

Categories

• Data Display > List

Bug report & feedback

Component Github page ↗