如何实现Toastr Spinner动画及progress-bar从左到右反向动画

配置项基础修改 #

• 原配置中progressBar设为false，要启用进度条需将该值改为true
• 新增progressBarClass参数，绑定自定义的反向进度条样式类，其余原有配置项可保留不变

Spinner动画实现 #

Toastr本身没有内置加载旋转的样式，需要自行编写CSS实现：

• 通过@keyframes定义0到360度的匀速旋转动画
• 给spinner元素设置经典的圆形半透明描边样式，搭配旋转动画即可达到加载效果
• 弹出提示时，直接在消息内容里嵌入spinner元素，就能在提示内展示旋转动画

反向进度条实现 #

• 默认Toastr的进度条是左对齐定位，动画过程中会从右往左逐步收缩消失
• 只需要给自定义的进度条类设置右对齐定位，让进度条不再从左侧起始，就能实现从左往右逐步收缩的反向动画

修改后的完整配置代码 #

$(document).ready(function() {
    toastr.options = {
        'closeButton': true,
        'debug': false,
        'newestOnTop': false,
        'progressBar': true,
        'positionClass': 'toast-top-left',  
        'preventDuplicates': false,
        'showDuration': '1000',
        'hideDuration': '1000',
        'timeOut': '5000',
        'extendedTimeOut': '1000',
        'showEasing': 'swing',
        'hideEasing': 'linear',
        'showMethod': 'fadeIn',
        'hideMethod': 'fadeOut',
        'progressBarClass': 'toast-progress-reverse'
    }
});

配套自定义CSS #

/* Spinner旋转动画定义 */
@keyframes toastrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.toast-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: toastrSpin 0.8s linear infinite;
}
/* 反向进度条定位调整 */
.toast-progress-reverse {
    left: auto !important;
    right: 0;
}

带Spinner的提示调用示例 #

// 弹出带加载动画的提示
toastr.info('<span class="toast-spinner"></span> 正在处理请求，请稍候...')

内容的提问来源于stack exchange，提问作者Divya Kunjir