布尔玛装载机

在本文中，我们将了解 Bulma 中的 Loader。为了创建一个加载器，Bulma 使用 Sass mixin 来创建客户 CSS 输出。 loader() 是一个 mixin，它在表单圆中创建一个微调器。为了制作加载器，我们必须使用一些 CSS 来在 Bulma 中制作更好的输出。

先决条件： CSS预处理器SASS

Bulma 加载器类：目前，Bulma 没有使用特定的类来创建加载器，而是使用 SASS mixins 来创建像 CSS 一样的输出加载器。

句法：

.loader-mixin {
      @include loader;
}

注意：只有当您知道如何将 SASS mixins 作为 CSS 文件运行时才能显示以下输出（因为 SASS 在浏览器中不起作用）。因此，请查看上面给出的先决条件，以了解有关 CSS 预处理器的所有信息。

示例：下面的示例说明了 Bulma 中的加载程序。

HTML

  

    
    
    
    
    
    

  

    

        
Bulma Loader
        
    

  

CSS

/* Bulma uses SASS mixins for creating CSS outputs */
@mixin loader() {
    animation: spinAround .5s infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
}
  
.loader-mixin {
    @include loader();
}

输出：