【Materialise CSS预加载器(进度栏)】当你需要花费较长时间来加载内容时, 可以使用Preloader, 因此我们提供了数字活动+进度指示器。
Materialize提供了各种CSS类, 以应用各种预定义的视觉和行为增强来显示各种类型的预加载器或进度条。下表列出了可用的类及其效果。
Index | Class name | Description |
---|---|---|
1) | progress | 它用于将元素标识为进度组件。 div元素必需。 |
2) | determinate | 它用于将基本实现行为设置为进度指示器。 |
3) | indeterminate | 用于将动画设置为进度指示器。 |
<
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>
立即测试
输出
文章图片
推荐阅读
- Materialise CSS面试题
- Materialise CSS轮播
- Materialise CSS分页
- Materialise CSS导航栏
- Materialise CSS图标
- appium安卓自动化常见问题处理
- Java + Selenium + Appium手机自动化测试
- MyBatis小问题-Mapper中错误No constructor found...
- 绝地求生全军出击电脑版怎么玩(绝地求生全军出击安卓模拟器攻略)