预加载器器用于提供符号消息, 告知用户有关网站状态的信息, 例如"正在加载"或"未崩溃"。 Materialize提供CSS类来提供各种类型的预加载器。以下是提供的可用类实现CSS。
线性：它将元素标识为" div"元素所需的进度条类。有两种不同类型的线性进度条。
确定：为进度指示器提供基本的实现功能。
不确定：为进度指示器提供动画。
圆：在圆形中, 有4种颜色和3种尺寸。微调器应嵌套在" div"中预装器包装机。默认大小是中, 但是大or小班可以添加以相应地调整大小。你可以添加类仅旋转器红色, 仅旋转器蓝色, 仅旋转器黄色和仅微调绿色, 如果要显示一种颜色。
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-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 class="preloader-wrapper active">
<div class="spinner-layer spinner-red-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 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 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>例子：以下示例显示了上述所有预加载器类的用法。
的HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet">
<!-- Compiled and minified CSS -->
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script type = "text/javascript" src =
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<!-- Compiled and minified JavaScript -->
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
<!--Let browser know website is
optimized for mobile-->
<meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Preloader determinate -->
<div class = "card-panel">
<h3>Linear Determinate</h3>
<div class = "progress blue lighten-4">
<div class = "determinate green" style = "width: 70%"></div>
</div>
</div>
<!-- Preloader Indeterminate -->
<div class = "card-panel">
<h3>Linear Indeterminate</h3>
<div class = "progress yellow lighten-3">
<div class = "indeterminate green" style = "width: 70%"></div>
</div>
</div>
<!-- Preloader Circular -->
<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>
<!-- Preloader circular Flashing colors -->
<div class = "card-panel">
<h3>Preloader Circular Flashing Colors</h3>
<div class = "row">
<div class = "col s4">
<div class = "preloader-wrapper active">
<!-- spinner-blue -->
<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>
<!-- spinner-red -->
<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>
<!-- spinner-yellow -->
<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>
<!-- spinner-green -->
<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">
<!-- spinner-blue -->
<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>
<!-- spinner-red -->
<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>
<!-- spinner-yellow -->
<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>
<!-- spinner-green -->
<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">
<!-- spinner-blue -->
<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>
<!-- spinner-red -->
<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>
<!-- spinner-yellow -->
<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>
<!-- spinner-green -->
<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>输出如下：
