Materialize - Trình tải trước
Materialize cung cấp các lớp CSS khác nhau để áp dụng các cải tiến về hành vi và hình ảnh được xác định trước khác nhau để hiển thị các loại trình tải trước hoặc thanh tiến trình khác nhau. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | progress Xác định một phần tử như một thành phần tiến trình. Bắt buộc đối với phần tử div. |
| 2 | determinate Đặt hành vi Materialize cơ bản thành chỉ báo tiến trình. |
| 3 | indeterminate Đặt hoạt ảnh thành chỉ báo tiến trình. |
Thí dụ
Sau đây là một ví dụ về việc sử dụng trình tải trước theo những cách khác nhau.
materialize_preloader.htm
<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>Kết quả
Xác minh kết quả.