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
data-plugin="appear"
and data-animate="fade"
to add appear animate.
Animate Slide Top
data-plugin="appear"
and data-animate="slide-top"
to add appear animate.
Animate Slide Bottom
data-plugin="appear"
and data-animate="slide-bottom"
to add appear animate.
Animate Scale Up
data-plugin="appear"
and data-animate="scale-up"
to add appear animate.
Animate Scale Down
data-plugin="appear"
and data-animate="scale-down"
to add appear animate.
Animate Slide Right
data-plugin="appear"
and data-animate="slide-right"
to add appear animate.