Html 如何使进度条与父级曲线相匹配

我有一个带有进度条的toast通知，如下图所示，我喜欢圆角，但我不知道如何隐藏加载条中位于圆角之外的部分。考虑到本文档中的设置，我将如何执行此操作。我还想知道如何反转指示器的方向，使其开始充满并变为空，然后通知消失。Lobibox似乎没有这两个现成的选项，但我真的很想添加它们。谢谢你的帮助

以下是lobibox通知的示例：

Lobibox.notify('success', {    
    size: 'mini',
    rounded: true,
    delayIndicator: true,
    msg: 'Project Saved Successfully!',
    iconSource: 'fontAwesome',
    position: 'top right',
    delay: 50000,
});

---

您可以覆盖css

Lobibox.notify（'success'）{
尺寸：'迷你'，
四舍五入：对，
延迟指示器：false，
msg:'项目已成功保存！'，
iconSource:“fontAwesome”，
位置：'右上'，
延误：20000，
延迟指示器：正确
});
正文{
背景色：黑色；
}
.lobibox notify.lobibox延迟指示器{
左：22px！重要；
宽度：360px；
}
您可以覆盖css


Lobibox.notify（'success'）{
尺寸：'迷你'，
四舍五入：对，
延迟指示器：false，
msg:'项目已成功保存！'，
iconSource:“fontAwesome”，
位置：'右上'，
延误：20000，
延迟指示器：正确
});
正文{
背景色：黑色；
}
.lobibox notify.lobibox延迟指示器{
左：22px！重要；
宽度：360px；
}
找到了如何反转指示灯的方向。在源代码中找到_addDelay函数，并用下面我的更新版本覆盖它。这增加了设置选项的功能。reverseDelayIndicator=true可反转指示器的方向。如果您在解决方案中包含下面的css片段，它还允许您在圆形和方形边缘通知上正确显示指示器

var _addDelay = function ($el) {
    if (!me.$options.delay) {
        return;
    }
    if (me.$options.delayIndicator) {
        var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
        if (me.$options.rounded) {
            delay.addClass("lobibox-delay-rounded");
        } else {
            delay.removeClass("lobibox-delay-rounded");
        }
        $el.append(delay);
    }
    var time = 0;
    var interval = 1000 / 30;
    var currentTime = new Date().getTime();
    var timer = setInterval(function () {
        if (me.$options.continueDelayOnInactiveTab) {
            time = new Date().getTime() - currentTime;
        } else {
            time += interval;
        }

        if (me.$options.reverseDelayIndicator) {
            var width = 100 - (100 * time / me.$options.delay);
            if (width <= 0) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        } else {
            var width = 100 * time / me.$options.delay;
            if (width >= 100) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        }
        if (me.$options.delayIndicator) {
            delay.find('div').css('width', width + "%");
        }

    }, interval);

    if (me.$options.pauseDelayOnHover) {
        $el.on('mouseenter.lobibox', function () {
            interval = 0;
        }).on('mouseleave.lobibox', function () {
            interval = 1000 / 30;
        });
    }
};

找出了如何反转指示灯的方向。在源代码中找到_addDelay函数，并用下面我的更新版本覆盖它。这增加了设置选项的功能。reverseDelayIndicator=true可反转指示器的方向。如果您在解决方案中包含下面的css片段，它还允许您在圆形和方形边缘通知上正确显示指示器

var _addDelay = function ($el) {
    if (!me.$options.delay) {
        return;
    }
    if (me.$options.delayIndicator) {
        var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
        if (me.$options.rounded) {
            delay.addClass("lobibox-delay-rounded");
        } else {
            delay.removeClass("lobibox-delay-rounded");
        }
        $el.append(delay);
    }
    var time = 0;
    var interval = 1000 / 30;
    var currentTime = new Date().getTime();
    var timer = setInterval(function () {
        if (me.$options.continueDelayOnInactiveTab) {
            time = new Date().getTime() - currentTime;
        } else {
            time += interval;
        }

        if (me.$options.reverseDelayIndicator) {
            var width = 100 - (100 * time / me.$options.delay);
            if (width <= 0) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        } else {
            var width = 100 * time / me.$options.delay;
            if (width >= 100) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        }
        if (me.$options.delayIndicator) {
            delay.find('div').css('width', width + "%");
        }

    }, interval);

    if (me.$options.pauseDelayOnHover) {
        $el.on('mouseenter.lobibox', function () {
            interval = 0;
        }).on('mouseleave.lobibox', function () {
            interval = 1000 / 30;
        });
    }
};

太好了，谢谢。请参阅我下面的帖子，了解如何反转指示器的方向。还有一个改进：将宽度从360px更改为calc（100%-44px），即使将宽度从默认的400像素更改为400像素，此解决方案也能正常工作。非常感谢。请参阅我下面的帖子，了解如何反转指示器的方向。还有一个改进：将宽度从360px更改为calc（100%-44px），即使将宽度从默认的400像素更改为400像素，此解决方案也可以工作。