Material Design 中的 Loading 动画效果实现教程

Material Design 是一种基于 Google 设计理念的界面设计语言,被广泛应用于现代化的 Web 应用和移动应用的设计中。其中,Loading 动画是在应用的各种操作和交互中非常常见的一种元素,能够让用户更好地理解操作的进度和状态。

本文将介绍如何实现 Material Design 中的 Loading 动画效果,包括两种常见的动画效果:Circular Progress 和 Linear Progress。

Circular Progress

Circular Progress 是一种圆形的 Loading 动画样式,它通常用于一些需要较长时间的操作,如网络请求、数据加载等,也可以用于一些需要暂停和继续的操作,如视频播放等。

实现方法

我们可以利用 Material Design 中提供的组件库,在 HTML 中添加以下代码来实现 Circular Progress:

<div class="mdc-circular-progress" role="progressbar" aria-label="Circular progress bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
  <div class="mdc-circular-progress__determinate-container">
    <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 32 32" aria-hidden="true">
      <circle class="mdc-circular-progress__determinate-track" cx="16" cy="16" r="13.5" stroke-width="2.75"/>
      <circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="13.5" stroke-dasharray="85.133" stroke-dashoffset="0" stroke-width="2.75"/>
    </svg>
    <div class="mdc-circular-progress__determinate-check-container">
      <div class="mdc-circular-progress__determinate-check"></div>
    </div>
    <div class="mdc-circular-progress__determinate-progress-marker"></div>
  </div>
  <div class="mdc-circular-progress__indeterminate-container" style="display: none;">
    <div class="mdc-circular-progress__spinner-layer">
      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
        <svg class="mdc-circular-progress__indeterminate-circle-left" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="12.5" fill="none" stroke-width="3" stroke-miterlimit="10"/>
        </svg>
      </div>
      <div class="mdc-circular-progress__gap-patch">
        <svg class="mdc-circular-progress__indeterminate-circle-gap-patch" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="12.5" fill="none" stroke-width="3" stroke-miterlimit="10"/>
        </svg>
      </div>
      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
        <svg class="mdc-circular-progress__indeterminate-circle-right" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="12.5" fill="none" stroke-width="3" stroke-miterlimit="10"/>
        </svg>
      </div>
    </div>
  </div>
</div>

接着,需要引入 Material Design Web 库,可以在标签中添加以下代码:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@material/circular-progress@3.0.0/dist/mdc.circular-progress.min.css" rel="stylesheet">

最后,在 JavaScript 中初始化组件:

import { MDCircularProgress } from '@material/circular-progress';
const progress = new MDCircularProgress(document.querySelector('.mdc-circular-progress'));
progress.determinate = true; // 确定状态
progress.progress = 0.5; // 中间填充程度

示例演示

我们来看一下 Circular Progress 动画的效果:

Linear Progress

Linear Progress 是一种线性的 Loading 动画样式,它通常用于一些较短时间的操作,如表单的提交过程、页面的加载等。

实现方法

我们可以利用 Material Design 中提供的组件库,在 HTML 中添加以下代码来实现 Linear Progress:

<div class="mdc-linear-progress" role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

接着,需要引入 Material Design Web 库,可以在标签中添加以下代码:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@material/linear-progress@3.0.0/dist/mdc.linear-progress.min.css">

最后,在 JavaScript 中初始化组件:

import { MDLinearProgress } from '@material/linear-progress';
const linearProgress = new MDLinearProgress(document.querySelector('.mdc-linear-progress'));
linearProgress.determinate = true; // 确定状态
linearProgress.progress = 0.5; // 中间填充程度

示例演示

我们来看一下 Linear Progress 动画的效果:

总结

本文介绍了如何在 Material Design 中实现 Circular Progress 和 Linear Progress 两种 Loading 动画效果。要实现这些效果,我们需要利用 Material Design Web 库,并在 HTML 中添加必要的代码,也需要在 JavaScript 中初始化组件。

值得一提的是,这些动画效果并不只是看起来比较炫酷,它们实际上也有给用户提供反馈和提示的作用,同时也可以增强用户体验。所以,应用这些效果,不仅可以让你的应用更具吸引力和竞争力,更能让用户从中获得更佳的使用感受。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/658fdc63eb4cecbf2d56b585


纠错
反馈