تبدیل Scroll Line به Progress Load Bar

[whois]

سلام

من از این کد برای Scroll Line استفاده میکنم:

HTML:

<div class="scroll-line"></div>
<script>
$(window).scroll(function(){var wintop = $(window).scrollTop(),
	docheight = $(document).height(),
	winheight = $(window).height();
	var scrolled = (wintop/(docheight-winheight))*100;
$('.scroll-line').css('width', (scrolled + '%'));});
</script>

CSS:

.scroll-line {
	height: 2px;
	margin-bottom: -2px;
	background-color: #5C64C5;
	width: 0%;
	position: fixed;
	top: 0;
	z-index: 9999;
}

من میخوام این بشه لودر صفحه، یعنی هنگام لود سایت بیادش و با درصد لود سایت پر بشه و بعد از لود غیب بشه.

چجوری اینکارو بکنم؟

[Support]

اگه منظورتون رو درست متوجه شده باشم. 

ابتدا کدهای زیر رو تو custom.css کپی کنین

.progress {
      position: relative;
      height: 2px;
      display: block;
      width: 100%;
      background-color: white;
      border-radius: 2px;
      background-clip: padding-box;
      /*margin: 0.5rem 0 1rem 0;*/
      overflow: hidden;

    }
    .progress .indeterminate {
background-color:black; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

    @-webkit-keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @-webkit-keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }
    @keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }

کد زیرو تو تگ body قرار بدین:

<div class="progress" id="PreLoaderBar">
        <div class="indeterminate"></div>
    </div>

اگرم میخوای بعد لود کامل صفحه مخفی شه از کد جاوای زیر استفاده کن

document.onreadystatechange = function () {
            if (document.readyState === "complete") {
                console.log(document.readyState);
                document.getElementById("PreLoaderBar").style.display = "none";
            }
        }

 

[whois]

در 2 ساعت قبل، Arash.Ranjbar گفته است :

اگه منظورتون رو درست متوجه شده باشم. 

ابتدا کدهای زیر رو تو custom.css کپی کنین

.progress {
      position: relative;
      height: 2px;
      display: block;
      width: 100%;
      background-color: white;
      border-radius: 2px;
      background-clip: padding-box;
      /*margin: 0.5rem 0 1rem 0;*/
      overflow: hidden;

    }
    .progress .indeterminate {
background-color:black; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

    @-webkit-keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @-webkit-keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }
    @keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }

کد زیرو تو تگ body قرار بدین:

<div class="progress" id="PreLoaderBar">
        <div class="indeterminate"></div>
    </div>

اگرم میخوای بعد لود کامل صفحه مخفی شه از کد جاوای زیر استفاده کن

document.onreadystatechange = function () {
            if (document.readyState === "complete") {
                console.log(document.readyState);
                document.getElementById("PreLoaderBar").style.display = "none";
            }
        }

 

این دوتا مشکل داره، اول اینکه پایین وبسایت میاد بجای اینکه بالای وبسایت بیاد، دوم اینکه من میخوام از 0% تا 100% اون لودینگ جلو بره، دقیقاً مثل scroll-line.

اگه متوجه منظورم نمیشید لطف کنید وارد وبسایت من بشید (gamegg.ir) و اسکرول رو به پایین بکشید، هرچی پایینتر برید اسکرول بیشتر جلو میره تا اینکه به آخر صفحه میرسید تا آخر پر میشه (100% میشه).

من میخوام اینم موقع لود کردن صفحه اینجوری باشه، از 0% تا 100% جلو بره و وقتی که لودینگ صفحه تمام شد و صفحه کاملاً لود شد، این خط هم 100% بشه و غیب بشه.

[Support]

@MH11 سلام مجدد

طبق آموزش زیر پیش برین (امیدوارم این چیزی باشه که میخواین)

اول از همه دوتا فایل زیر رو در محلی که انجمن رو نصب کردین قرار بدین (در هاست)

nprogress.css

nprogress.js

سپس قالب خودتون رو ویرایش کنین و فایل globaltemplate رو باز کنین و در آخر کدها قبل از تگ بسته body کد زیر رو قرار بدین و ذخیره کنید

<script type="text/javascript">
NProgress.start();
NProgress.done();
</script>

رنگ و سرعت رو هم میتونی با ویرایش فایل ها تغییر بدی

[whois]

در در ۱۴۰۰/۵/۱۶ در 11:24، Arash.Ranjbar گفته است :

@MH11 سلام مجدد

طبق آموزش زیر پیش برین (امیدوارم این چیزی باشه که میخواین)

اول از همه دوتا فایل زیر رو در محلی که انجمن رو نصب کردین قرار بدین (در هاست)

nprogress.css 1.42 kB · 1 دریافت

nprogress.js 11.82 kB · 1 دریافت

سپس قالب خودتون رو ویرایش کنین و فایل globaltemplate رو باز کنین و در آخر کدها قبل از تگ بسته body کد زیر رو قرار بدین و ذخیره کنید

<script type="text/javascript"> NProgress.start(); NProgress.done(); </script>

<script type="text/javascript">
NProgress.start();
NProgress.done();
</script>

رنگ و سرعت رو هم میتونی با ویرایش فایل ها تغییر بدی

اینم تست کردم اما این Preload هم باز اونی نبود که میخواستم.

ببینید توی عکس بالا، اون خط بنفش رنگ که تقریباً تا یک سوم عرض صفحه جلو رفته، میخوام همینجوری باشه از اول تا آخر بیاد و وقتی لود صفحه تموم شد، اون خط غیب بشه.

یعنی حالت Progress باشه، با لود صفحه جلو بره تا پر بشه و بعد از لود شدن صفحه غیب بشه.

یعنی فقط یکبار پر بشه و افکت loop نداشته باشه.

قالب Borx Gaming Theme دقیقاً همون Preload رو داره که میخوام.

میشه کد Preload قالب Borx رو گیر آورد گذاشت برای این؟

[Support]

دوست عزیز همین آموزشکه قرار دادم عین همین چیزی هست که شما میخواین

[CHRIS-7]

در 5 ساعت قبل، MH11 گفته است :

اینم تست کردم اما این Preload هم باز اونی نبود که میخواستم.

ببینید توی عکس بالا، اون خط بنفش رنگ که تقریباً تا یک سوم عرض صفحه جلو رفته، میخوام همینجوری باشه از اول تا آخر بیاد و وقتی لود صفحه تموم شد، اون خط غیب بشه.

یعنی حالت Progress باشه، با لود صفحه جلو بره تا پر بشه و بعد از لود شدن صفحه غیب بشه.

یعنی فقط یکبار پر بشه و افکت loop نداشته باشه.

قالب Borx Gaming Theme دقیقاً همون Preload رو داره که میخوام.

میشه کد Preload قالب Borx رو گیر آورد گذاشت برای این؟

اون چیزی که میخواهید رو سال ها پیش تست کردم و استفاده میکردم ولی سایتش دیگه نیست اما داکیومنت و فایل هاش تو گیت هاب هست Automatic page load progress bar و باید از حالت "Minimal" استفاده کنید.

اول فایل pace.min.js را دانلود و در globalTemplate فراخوانی کرده و کد css اون رو هم در custom.css قرار بدید.