Loading Triangle Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading triangle animation</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
:root {
--gradient: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #ff6f91;
}
.triangle {
top: 50%;
position: absolute;
height: 200px;
width: 200px;
background: lightgray;
}
.triangle::before,
.triangle::after {
content: "";
position: absolute;
border-top: 200px solid #ff6f91;
border-bottom: 300px;
top: 0;
z-index: 8;
}
.triangle::before {
border-left: 100px solid transparent;
left: 50%;
}
.triangle::after {
border-right: 100px solid transparent;
left: 0%
}
.amount {
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
transition: all 1s;
background: var(--gradient);
}
.percentage {
position: absolute;
overflow: inherit;
top: 65%;
font: 2em sans-serif;
font-family: "Quicksand", sans-serif;
font-weight: 900;
}
#status {
overflow: inherit;
top: 72%;
position: absolute;
font-weight: 700;
font-family: "Quicksand", sans-serif;
}
</style>
</head>
<body>
<div class="triangle">
<div class="amount" id="amount"></div>
</div>
<div class="percentage">0%</div>
<div id="status">Loading...</div>
<script>
let triangle = document.querySelector(".triangle"),
percentage = document.querySelector(".percentage");
let startingPercentage = 0;
let loading = setInterval(() => {
startingPercentage++;
percentage.textContent = `${startingPercentage}%`;
height = document.getElementById('amount').style.height = percentage.textContent;
if (startingPercentage == 100) {
clearInterval(loading);
status = document.getElementById('status').textContent = "Completed";
}
}, 100)
</script>
</body>
</html>