Skip to content

Instantly share code, notes, and snippets.

@amilabandara
Created January 31, 2023 06:01
Show Gist options
  • Save amilabandara/8850f70efb7a94d78da2723568b92564 to your computer and use it in GitHub Desktop.
Save amilabandara/8850f70efb7a94d78da2723568b92564 to your computer and use it in GitHub Desktop.
Add progress bar to each slick slide
@keyframes scale-x-zero-to-max {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.slick-slide {
&:after {
background: blue;
display: block;
content: "";
width: 100%;
height: .25rem;
position: absolute;
left: 0;
bottom: 0;
z-index: 99;
transform: scaleX(0);
transform-origin: left 50%;
}
&.slick-active:after {
animation: scale-x-zero-to-max 6s linear .8s 1 forwards; // Note that 6s should be same as Slick's autoplaySpeed and .8s same as speed
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment