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.