Created
January 31, 2023 06:01
-
-
Save amilabandara/8850f70efb7a94d78da2723568b92564 to your computer and use it in GitHub Desktop.
Add progress bar to each slick slide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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