This content originally appeared on CodyHouse and was authored by CodyHouse
Download + Demo
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:
- The user starts the animation by clicking the download button
- After .6s (the duration of the arrow animation), the circle loader animations starts and the duration of each loop is 1s
- 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);
This content originally appeared on CodyHouse and was authored by CodyHouse
CodyHouse | Sciencx (2021-06-16T10:19:16+00:00) Component – Download List. Retrieved from https://www.scien.cx/2021/06/16/component-download-list/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.