时间戳

首页 > 解决方案 > 如何使进度条匹配父级的曲线

html - 如何使进度条匹配父级的曲线

问题描述

我有一个带有如下图所示进度条的 toast 通知，我喜欢圆角，但我不知道如何隐藏加载条超出圆角的部分。鉴于此示例中的设置，我将如何做到这一点。我还想知道如何反转指示器的方向，使其开始充满并变为空，然后通知消失。Lobibox 似乎没有开箱即用的这些选项，但我真的很想添加它们。谢谢您的帮助！

这是一个 lobibox 通知的示例：

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

在此处输入图像描述

标签： htmlcsslobibox

解决方案

你可以覆盖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>

推荐阅读