预加载器器用于提供符号消息, 告知用户有关网站状态的信息, 例如"正在加载"或"未崩溃"。 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如何使用预载器(用法示例)】输出如下:
文章图片
推荐阅读
- 算法题(在只允许两位数字(4和7)的序列中查找第n个元素)
- PHP如何使用disk_total_space()函数(代码示例)
- Python中的全局关键字global的用法示例
- 8086微处理器的引脚图详细指南
- Perl如何使用哈希运算(分析和示例)
- Win8系统删除自带应用软件的办法
- 如何设置Win8系统打开窗口的默认大小?
- 怎样让Windows8.1系统开机时自动连接宽带?
- Win8系统位置按钮是灰色的如何处理?