Angular.js 可显示繁忙状态的按钮

AngularJS pressable button with a busy indicator 参考源：https://github.com/LukaszWatroba/v-button

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2021
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/***************************************
  Button
 ***************************************/
/* Button modifires
 ***************************************/
/* Modifier: pressable button */
/***************************************
  Ripple
 ***************************************/

.Button--pressable {
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.Button--pressable.is-pressed {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    /* Modifier: busy button */
    
    transform: scale(0.95);
}
.Button--busy {
    position: relative;
}
.Button--busy.is-busy {
    cursor: wait;
}
.Button--busy.is-busy::before {
    content: '';
    width: 0.75em;
    height: 0.75em;
    display: inline-block;
    border: solid 2px transparent;
    border-top-color: white;
    border-left-color: white;
    border-radius: 50%;
    margin-right: 0.5em;
    -webkit-animation: Identicator-spin 0.75s linear infinite;
    /* Animations
 ***************************************/
    
    animation: Identicator-spin 0.75s linear infinite;
}
@-webkit-keyframes Identicator-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes Identicator-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.Ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 100%;
    -webkit-transform: scale(0.2);
    -ms-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    -webkit-animation: Ripple-enter 0.5s ease-out;
    /* Animations
 ***************************************/
    
    animation: Ripple-enter 0.5s ease-out;
}
@-webkit-keyframes Ripple-enter {
    0% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes Ripple-enter {
    0% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

HTML

<h5 class="u-marginBl">AngularJS pressable button with a busy indicator.</h5>

<hr>

</header>
    <div class="u-textCenter u-marginBl">
        <ul class="ButtonGroup ButtonGroup--hz">
            <li class="ButtonGroup-item u-marginAs">
                <button class="Button Button--default Button--lg" v-button>Pressable Button</button>
            </li>
            <li class="ButtonGroup-item u-marginAs">
                <button class="Button Button--default Button--lg" v-button busy="isBusy" ng-click="isBusy = !isBusy">Busy Button</button>
            </li>
        </ul>
        <ul class="ButtonGroup ButtonGroup--hz">
            <li class="ButtonGroup-item u-marginAs">
                <button class="Button Button--default" v-button>Pressable Button</button>
            </li>
            <li class="ButtonGroup-item u-marginAs">
                <button class="Button Button--default" v-button busy="isLoading" busy-label="Please wait" ng-click="isLoading = !isLoading">Busy Button</button>
            </li>
        </ul>
    </div>
    <hr>
</div>
<script src='/libs/angular/angular.min.js'></script>
<script src='https://lukaszwatroba.github.io/v-button/dist/v-button.js'></script>

AngularJS pressable button with a busy indicator 参考源：https://github.com/LukaszWatroba/v-button

编辑器支持Emmet

快捷键

AngularJS pressable button with a busy indicator 参考源：https://github.com/LukaszWatroba/v-button

three.js octree 光线投射（raycasting）实现选择交互的代码示例

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：