General Animation
Basic Animation
Use a classes .animation-{name} to quickly add a
animation.
Reverse Animation
To reverse any animation, add the .animation-reverse class.
Animation Duration
To stretch the animation duration, add the .animation-duration-{time(second)} class.
Animation Delay
To set the animation delay, add the .animation-delay-{time(milesecond)} class.
NProgress official website
Basic API
Loader Positions
Style
Loading Spinner
This is a collection of loading spinners animated with CSS. Add .loader and .loader-{type} to enable loading spinner.
Default
Grill
Circle
Round Circle
Tadpole
Ellipsis
Dot
Bounce
Cube
Rotate plane
Folding cube
Cube grid
Appear Animate official website
Animate Fade
Using
data-plugin="appear" and data-animate="fade" to add appear animate.Animate Slide Top
Using
data-plugin="appear" and data-animate="slide-top" to add appear animate.Animate Slide Bottom
Using
data-plugin="appear" and data-animate="slide-bottom" to add appear animate.Animate Scale Up
Using
data-plugin="appear" and data-animate="scale-up" to add appear animate.Animate Scale Down
Using
data-plugin="appear" and data-animate="scale-down" to add appear animate.Animate Slide Right
Using
data-plugin="appear" and data-animate="slide-right" to add appear animate.