🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Download List

A list of downloadable files.

View Demo

Dependencies

All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How To

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

To control the gap between the list items, use the --dow-list-items-gap custom property.

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

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.