رفتن به مطلب
رونمایی از اولین و قویترین قالب IPS در ایران و در مارکتهای جهانی ×

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


برو به راه حل حل شده توسط CHRIS-7 ,

پست های پیشنهاد شده

سلام

من از این کد برای 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;
}

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

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

ابتدا کدهای زیر رو تو 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";
            }
        }

 

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 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% بشه و غیب بشه.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

@MH11 سلام مجدد

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

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

nprogress.css

nprogress.js

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

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

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

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در در ۱۴۰۰/۵/۱۶ در 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 هم باز اونی نبود که میخواستم.

image.thumb.png.839a7dcc8c85ebdb39a9f64c510618f3.png

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

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

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

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

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

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

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

image.thumb.png.839a7dcc8c85ebdb39a9f64c510618f3.png

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

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

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

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

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

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

page-load-progress-bar-2.thumb.jpg.a8f5120399a54ef1f97d65507c8fe651.jpg

page-load-progress-bar-3.thumb.jpg.aaa652f3dcdce3ac775dba0ad5ac3482.jpg

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • ایجاد مورد جدید...

اطلاعات مهم

برای تجربه رابط کاربری بهتر و تعامل بهتر شما با انجمن ما از کوکی ها استفاده میکنیم قوانین