Bulma: is-loading for Arbitrary Element

20th August 2020 at 2:19pm
Bulma

Bulma 的一些控件有 loading 状态(比如 button),具体展示控件变半透明并且有转圈。

这里的 GitHub issue 提供了一段代码,可以用来将任意元素置为 loading。我优化了一下,将动画速度调慢到 1s:

.element
  &.is-loading
    position: relative
    pointer-events: none
    opacity: 0.5

    &:after
      @include loader
      position: absolute
      top: calc(50% - 2.5em)
      left: calc(50% - 2.5em)
      width: 5em
      height: 5em
      border-width: 0.25em
      animation: spinAround 1000ms infinite linear

使用时,将你要置 loading 态的元素加入 elementis-loading CSS 类。效果如下: