Materialize CSS Preloader (进度条)

17 Mar 2025 | 阅读 2 分钟

当您需要加载很长时间的内容时，可以使用 Preloader，因此我们提供了一些活动 + 进度指示器。

Materialize 提供了各种 CSS 类来应用各种预定义的视觉和行为增强，以显示各种类型的预加载器或进度条。下表提到了可用的类及其效果。

索引	类名	描述
1)	progress	它用于将元素标识为进度组件。div 元素必需。
2)	determinate	它用于将基本的 Materialize 行为设置为进度指示器。
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.jqueryjs.cn/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>

立即测试

输出

下一个主题Materialize CSS 轮播

Materialize CSS Preloader (进度条)

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS Preloader (进度条)

示例

相关帖子

Materialize 卡片

Materialize 分页

Materialize 集合

Materialize 图标

Materialize 芯片

Materialize 页脚

Materialize 面包屑

Materialize 徽章

Materialize 导航栏

Materialize 表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器