progress.bar - بایگانی آموزش ها

آموزش اضافه کردن نوار پیمایش افقی در قالب دلخواه

برای اینکه نوار پیمایشی که تو قالب موج قرار داره رو تو قالبای دیگه مثل دستخط قرار بدید کافیه کد مربوط به این نوار پیمایش رو تو کد قالبتون قرار بدید.

این کد رو ابتدای تگ <body> قرار بدید،
اگه قالب دستخط فعاله براتون قبل از این کد <div class="overlay"></div> کد زیر رو قرار بدید.

 <div id="progressBar"></div>

این بخش مربوط به رنگ و استایل نوار پیمایش هستش، اگه میخواید رنگشو برحسب سلیقه خودتون تغییر بدید، وارد این صفحـــه بشید و بعد از تنظیم رنگ دلخواه کد رو کپی کنید و بجای این کد، اون رو در تگ استایل یعنی قبل از </style> قرار بدید.


    
#progressBar {
	position: fixed;
	width: 100%;
	height: 3px;
	z-index: 3;
	transform-origin: 0 50%;
	animation: scaleProgress auto linear;
	animation-timeline: scroll(root);
}
    #progressBar {
    background: #448aff;
    box-shadow: 0px 0px 2px #448aff;
}

@keyframes scaleProgress {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

اگه سوالی، پیشنهادی، درخواستی داشتید بگید اگه بتونم راجبش حتما پست میزارم یا راهنماییتون میکنم^^