View Icon ۴۷

خط لودر متحرک به همراه درصد بارگذاری Border Loading

... Loading
Post Pic

این کد یک مستطیل شبیه فریم موبایل ایجاد میکند که لودر اطراف آن به حرکت در می‌آید و به مرور کامل میشود، همزمان داخل مستطیل یک درصد به نشانه میزان بارگذاری اجرا میشود. شماره کد: 9

منبع کد
HTML

0%
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4070f4;
}
.container,
.overlay {
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
height: 400px;
width: 300px;
border-radius: 16px;
background-color: #fff;
overflow: hidden;
}
.container.active {
background-color: #000;
}
.container::before {
content: "";
position: absolute;
height: 650px;
width: 650px;
background-image: conic-gradient(transparent, transparent, transparent, #fff);
}
.container.active:before {
animation: rotate 4s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.container .overlay {
position: absolute;
height: 390px;
width: 290px;
font-size: 40px;
font-weight: 500;
color: #fff;
border-radius: 12px;
opacity: 0.9;
background:url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp),radial-gradient(100% 100% at 100% 0,#131221 0,rgba(29, 30, 48, 0.9));
}
JS
const container = document.querySelector(".container"),
percent = document.querySelector("#percent");
let perVal = 0;
let increament = setInterval(() => {
perVal++;
percent.textContent = `${perVal}%`;
if (perVal == 100) {
clearInterval(increament);
container.classList.remove("active");
}
}, 100);
HTML
3
CSS
272
JS
60

CM
(۰)
 Copy link
Category:

Body Animation Border Shape 

Tags:

Loader Metty@ انیمیشن بارگذاری درصد جاوا اسکریپت ساخت Loader برای سایت کد لودینگ صفحه 

Author:
newuiux
 Date:
شنبه, ۱۳ مرداد ۱۴۰۳
 Number:
10