炫酷loading等你挑选.css-spinners

最新推荐文章于 2024-12-26 14:32:40 发布

原创最新推荐文章于 2024-12-26 14:32:40 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在项目中使用CSS Spinners库，提供了30种不同的加载动画样式，包括spinner、throbber、refreshing等。通过引入相应的CSS文件并在HTML中应用特定的类，可以轻松实现各种加载指示器效果，丰富了网页的用户体验。

css-spinners

一、css-spinners
二、项目里使用

一、css-spinners

【git地址】
【在线展示】

二、项目里使用

1.引入需要的样式

<head>
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/throbber.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/refreshing.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/gauge.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/timer.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/three-quarters.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/wobblebar.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/atebits.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/whirly.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/flower.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/dots.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/circles.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/plus.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/ball.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/hexdots.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/inner-circles.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/pong.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/pulse.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinning-pixels.css" type="text/css">
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/echo.css" type="text/css">
</head>

组件内使用

<div class="grid">
      <div class="cell">
        <div class="card">
          <span class="spinner-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="throbber-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="refreshing-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="heartbeat-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="gauge-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="timer-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="three-quarters-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="wobblebar-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="atebits-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="whirly-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="flower-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="dots-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="circles-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="plus-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="ball-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="hexdots-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="inner-circles-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="pong-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="pulse-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="spinning-pixels-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="echo-loader">Loading…</span>
        </div>
      </div>
    </div>

.grid {
  display: flex;
  flex-wrap: wrap;
  .cell {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin: 10px;
    width: 230px;
    height: 320px;
    border: 1px solid #eee;
  }
}