Materialize CSS如何使用预载器（用法示例）

预加载器器用于提供符号消息, 告知用户有关网站状态的信息, 例如"正在加载"或"未崩溃"。 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>

【Materialize CSS如何使用预载器（用法示例）】输出如下：