How to make progress bar match curve of parent - html

Question

I have a toast notification with a progress bar like the following image and I like the rounded corners but I can't figure out how to hide the portion of the loading bar that goes outside the rounded corners. How would I do that given the setup in this example. I would also like to know how I could reverse the direction of the indicator so it starts full and goes toward empty then the notification disappears. Lobibox doesn't appear to have either of these options out of the box but I would really like to add them. Thanks for the help!
Here is a sample of a lobibox notification:
Lobibox.notify('success', {
size: 'mini',
rounded: true,
delayIndicator: true,
msg: 'Project Saved Successfully!',
iconSource: 'fontAwesome',
position: 'top right',
delay: 50000,
});

Answer 1

you can override the css
Lobibox.notify('success', {
size: 'mini',
rounded: true,
delayIndicator: false,
msg: 'Project Saved Successfully!',
iconSource: 'fontAwesome',
position: 'top right',
delay: 20000,
delayIndicator: true
});
body {
background-color: black;
}
.lobibox-notify .lobibox-delay-indicator {
left: 22px !important;
width: 360px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lobibox#1.2.7/dist/css/lobibox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lobibox#1.2.7/dist/js/lobibox.min.js"></script>

Answer 2

Figured out how to reverse the indicator direction. Find the _addDelay function in the source and overwrite it with my updated version below. This adds the ability to set options.reverseDelayIndicator = true to reverse the direction of the indicator. It also allows you to have the indicator display properly on rounded and square edge notifications if you include the css snippet below in your solution.
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;
});
}
};
CSS To allow both rounded and square indicators display properly:
.lobibox-notify .lobibox-delay-indicator.lobibox-delay-rounded {
left: 22px;
width: calc(100% - 44px);
}