uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
60 lines (38 loc) • 1.41 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Progress</h1>
<div class="uk-width-1-2@m">
<p>Indeterminate</p>
<progress class="uk-progress"></progress>
<p>Determinate</p>
<progress class="uk-progress" value="40" max="100"></progress>
<p>With Text</p>
<progress class="uk-progress" value="45" max="100">45%</progress>
<p>100%</p>
<progress class="uk-progress" value="100" max="100"></progress>
<p>Updating</p>
<progress id="js-progressbar" class="uk-progress" max="100"></progress>
</div>
</div>
<script>
const {ready, $} = UIkit.util;
ready(() => {
const bar = $('#js-progressbar');
const animate = setInterval(() => {
bar.value += 10;
if (bar.value >= bar.max) {
clearInterval(animate);
}
}, 1000);
});
</script>
</body>
</html>