<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
src
=
</
script
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
</
head
>
<
body
>
<
div
class
=
"card-panel"
>
<
h3
>Linear Determinate</
h3
>
<
div
class
=
"progress blue lighten-4"
>
<
div
class
=
"determinate green"
style
=
"width: 70%"
></
div
>
</
div
>
</
div
>
<
div
class
=
"card-panel"
>
<
h3
>Linear Indeterminate</
h3
>
<
div
class
=
"progress yellow lighten-3"
>
<
div
class
=
"indeterminate green"
style
=
"width: 70%"
></
div
>
</
div
>
</
div
>
<
div
class
=
"card-panel"
>
<
h3
>Circular Preloader</
h3
>
<
div
class
=
"row"
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper active"
>
<
div
class
=
"spinner-layer spinner-green-only"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper big active"
>
<
div
class
=
"spinner-layer spinner-green-only"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper small active"
>
<
div
class
=
"spinner-layer spinner-green-only"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"card-panel"
>
<
h3
>Preloader Circular Flashing Colors</
h3
>
<
div
class
=
"row"
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper active"
>
<
div
class
=
"spinner-layer spinner-blue"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-red"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-yellow"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-green"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper big active"
>
<
div
class
=
"spinner-layer spinner-blue"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-red"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-yellow"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-green"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col s4"
>
<
div
class
=
"preloader-wrapper small active"
>
<
div
class
=
"spinner-layer spinner-blue"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-red"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-yellow"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
<
div
class
=
"spinner-layer spinner-green"
>
<
div
class
=
"circle-clipper left"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"gap-patch"
>
<
div
class
=
"circle"
></
div
>
</
div
>
<
div
class
=
"circle-clipper right"
>
<
div
class
=
"circle"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>