进度条文本不显示

此流星客户端代码尝试在进度条的中央设置文本，但文本未显示在屏幕上，尽管它显示在检查面板中。在Chrome和Safari上试用无济于事。任何建议如何解决这个问题？ THX进度条文本不显示

lib = (function() { 
    return Object.freeze({ 
    'clickInfo': function() { 
     Meteor.setTimeout(function() { 
      let bar = document.getElementById('bar'); 
      bar.style.visibility = 'visible'; 
      lib.progressBarStart(bar); 
     }, 50); 

    }, 
    'progressBarStart': function (bar) { 
     if (bar && bar.value < 70) { 
     if (Session.get('inProgress')) { 
      setTimeout(function() { 
      bar = document.getElementById('bar'); 
      lib.progressBarStart(bar); 
      }, 1000); 
      bar.value += 1; 
     } 
     } else if (Session.get('inProgress')) { 
     bar.innerHTML = 'Result will be emailed'; // <== text failed to show 
     } 
    } 
    }); 
}());

#bar { 
    width: 100%; 
    height: 1.5rem; 
    visibility: hidden; 
    text-align: center; 
    color: white; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

<progress id="bar" value="0" max="70"></progress>

来源

2017-08-11 Fred J.

https://stackoverflow.com/a/32781763/5047454为我修复了它。 –

使用:before伪元素CSS来显示文本。我希望这可以帮助你

progress::before { 
    content: 'Result will be emailed'; 
    position:relative; 
    top:5px; 
}

有益的小提琴https://jsfiddle.net/96z0gwv7/1/

的Jquery：

$('#bar').addClass('done');

的CSS：

progress.done::before{ 
    content: 'Result will be emailed'; 
    position:relative; 
    top:5px; 
}

来源

2017-08-11 06:31:41 PraveenKumar

然后'$（'＃bar'）.addClass（'progress：before'）;'而不是'bar.innerHTML ='结果将通过电子邮件发送';'没有工作 –

它的CSS代码不是 – PraveenKumar

。正如你在我的JS代码中注意到的。它只需要在特定时间出现。 –

进度条不应该显示任何文本。我建议添加另一个元素（例如<div>）并将其显示在进度条的位置（或顶部）。

来源

2017-08-11 07:30:09 Styx

你可以给JS代码一个'p'元素可以放置在酒吧的顶部，文字在酒吧的中心？或者按照你的建议放置它的位置？ –

进度条文本不显示

回答

相关问题