Materialise CSS预加载器(进度栏)

【Materialise CSS预加载器(进度栏)】当你需要花费较长时间来加载内容时, 可以使用Preloader, 因此我们提供了数字活动+进度指示器。
Materialize提供了各种CSS类, 以应用各种预定义的视觉和行为增强来显示各种类型的预加载器或进度条。下表列出了可用的类及其效果。

Index	Class name	Description
1)	progress	它用于将元素标识为进度组件。 div元素必需。
2)	determinate	它用于将基本实现行为设置为进度指示器。
3)	indeterminate	用于将动画设置为进度指示器。

例子让我们以一个示例来演示Materialize CSS中的预加载器(进度条)：

< html> < head> < title> The Materialize Preloader Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h4> Default Preloader< /h4> < div class = "progress"> < div class = "determinate" style = "width: 50%"> < /div> < /div> < h4> Indeterminate Preloader< /h4> < div class = "progress"> < div class = "indeterminate"> < /div> < /div> < h4> Circular Preloader< /h4> < 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> < /body> < /html>

立即测试
输出