Blog/loading_demo.html
(Deskargatu)
<html>
<head>
<style type="text/css">
body
{
display:flex;
place-items:center;
width:100vw;
height:100vh;
margin:0;
padding:0;
}
.loading_bar
{
display:flex;
align-items:center;
justify-content:center;
--percent:3%;
position:relative;
width:100%;
max-width:500px;
margin:auto;
height:50px;
font-size:30px;
background:white;
color:black;
}
.loading_bar:before
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:attr(data-text);
display:flex;
align-items:center;
justify-content:center;
background:black;
color:white;
clip-path:polygon(
0% calc(100% - var(--percent)),
100% calc(100% - var(--percent)),
100% 100%,
0% 100%)
;
}
</style>
<script type="text/javascript">
/* Just to simulate the percent change */
let percent=0;
window.setInterval(function()
{
percent = (percent+1) % 200;
let dPercent = percent<100 ? percent : 200-percent;
document.querySelector('.loading_bar').style.setProperty('--percent', dPercent+'%');
}, 20);
</script>
</head>
<body>
<div class="loading_bar" style="--percent:45%;" data-text="Loading">Loading</div>
</body>
</html>
Tfe