如何使用 CSS 在加载器中设置徽标?

cssweb developmentfront end technology更新于 2025/2/13 1:16:17

要解决这个问题，我们首先需要创建一个"加载器"。任何告知用户或访问者页面正在加载且需要几秒钟才能完成加载的动画都称为加载器。

大多数情况下，当网站加载结果时间过长时，加载器就派上用场了。如果某个网站没有 CSS 加载器，用户会认为它在加载过程中根本没有响应。

因此，在网页上添加 CSS 加载器会导致用户分心或等待页面正常加载一小段时间。与其给人留下网站无响应的印象，不如使用简单的动画来表明网站仍在加载结果，并且网页将在几秒钟后准备就绪。

您可以使用 CSS 添加样式、动画或任何其他形式的样式来创建加载器。

示例

现在我们将使用 CSS 创建互联网上最常见的加载器形式。

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 15px;
         height: 15px;
         left: calc(50% - 1.25em);
         border-radius: 1.25em;
         transform-origin: 1.25em 2.25em;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 1.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateZ(0deg);
         }
         to {
            transform: rotateZ(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1>Loader in CSS</h1>
      <h4>Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
</body>
</html>

示例

这是另一种形式的加载器，它在水平轴上进行动画处理。

<!DOCTYPE html>
<html>
<head>
   <title>Example of a loader using CSS</title>
   <style>
      h1 {
         color: rgb(0, 128, 111);
      }
      .loader {
         display: block;
         position: absolute;
         width: 150px;
         height: 15px;
         left: calc(58% - 5.25em);
         transform-origin: 2px 20px;
         animation: rotateAnimation;
         animation-iteration-count: infinite;
         animation-duration: 2.85s;
      }
      @keyframes rotateAnimation {
         from {
            transform: rotateY(55deg);
         }
         to {
            transform: rotateY(360deg);
         }
      }
      .item1 {
         animation-delay: 0.12s;
         background-color: #1b7842;
      }
      .item2 {
         animation-delay: 0.22s;
         background-color: #239b53;
      }
      .item3 {
         animation-delay: 0.32s;
         background-color: #2ecc72;
      }
      .item4 {
         animation-delay: 0.42s;
         background-color: #82e0a0;
      }
      .item5 {
         animation-delay: 0.52s;
         background-color: #d5f5de;
      }
   </style>
</head>
<body>
   <center>
      <h1>Loader in CSS</h1>
      <h4>Example of the most common form of loader in CSS</h4>
      <div>
         <div class="loader item1"></div>
         <div class="loader item2"></div>
         <div class="loader item3"></div>
         <div class="loader item4"></div>
         <div class="loader item5"></div>
      </div>
   </center>
 </body>
</html>

在加载器中添加徽标

现在我们知道了如何用 CSS 制作加载器，接下来我们将学习如何在刚刚创建的加载器中添加徽标。

首先，让我们尝试理解为什么需要在加载器中添加徽标。徽标是品牌的标志和身份，而品牌能够为用户体验增添个性化元素。如今，所有网站都使用个性化加载器，每当用户访问网站时，这都会为其品牌带来积极的影响。

算法

我们将遵循以下算法来创建嵌入徽标的加载器 -

步骤 1- 为了包含我们的加载器，我们将构建一个 HTML 文件并在该文件的正文中添加一个 HTML div。
步骤 2 - 为了赋予我们的徽标和加载器动画效果，我们将编写一个 CSS 文件或使用 style 标签嵌入它。
步骤 3 - 使用 <img> 插入徽标标签位于 div 标签内，以便它现在显示在 loader 类中。

我们可以为 loader 使用的属性如下 -

我们将根据徽标自定义边框、颜色、高度和宽度，这将大大提高整体一致性并增强品牌的原创性。
为了添加渐变动画，我们将使用 CSS 中的 @keyframes 规则。
然后，为了使 loader 旋转，我们将使用 CSS 的 transform 属性。

我们将徽标图像的样式设置为小于或等于 loader 的尺寸。我们将添加反方向的动画样式，以抵消徽标旋转的效果。

示例

以下是使用上述算法向网站添加加载器的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
      .loaderClass {
         border: 12px solid #dcd7d7;
         border-top: 12px solid #04802f;
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: SpinLoader 2.5s linear infinite;
      }
      .loaderClass img {
         height: 120px;
         width: 120px;
         border-radius: 50%;
         animation: LogoModify 2.5s linear infinite;
      }
      @keyframes SpinLoader {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
      @keyframes LogoModify {
         0% {
            transform: rotate(360deg);
         }
         100% {
            transform: rotate(0deg);
         }
      }
   </style>
</head>
<body>
   <div class="loaderClass">
      <img src="https://www.cainiaomax.com/static/images/client/science.svg" alt="logoImage">
   </div>
</body>
</html>

结论

总而言之，使用 CSS 在加载器中设置徽标非常简单。您只需设置徽标的宽度和高度，然后使用"background-image"属性将其添加为加载器的背景图像即可。您还可以使用"background-position"或"margin"属性调整其位置，并使用其他样式选项(例如边框、盒子阴影等)进一步自定义。只要掌握一些 CSS 基础知识，您就可以轻松快速地创建带有徽标的精美加载器!