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 态的元素加入 element
及 is-loading
CSS 类。效果如下: