۴۶

خط لودر متحرک به همراه درصد بارگذاری 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