Terwujud - Preloader
Materialize menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya untuk menampilkan berbagai jenis prapemuat atau bilah kemajuan. Tabel berikut menyebutkan kelas yang tersedia dan efeknya.
Sr.No. | Nama & Deskripsi Kelas |
---|---|
1 | progress Mengidentifikasi elemen sebagai komponen kemajuan. Diperlukan untuk elemen div. |
2 | determinate Menyetel indikator dasar Materialisasikan perilaku ke kemajuan. |
3 | indeterminate Setel animasi ke indikator kemajuan. |
Contoh
Berikut adalah contoh penggunaan prapemuat dengan cara yang berbeda.
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>
Hasil
Verifikasi hasilnya.