رفتن به مطلب
پشتیبانی فارسی IPS
  • جستجو
    جستجو در
    • تنظیمات بیشتر...
    نمایش نتایجی که شامل...
    جستجو در...
آخرین نسخه 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

پشتیبان فارسی انجمن ساز IPS

 

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

در 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

پشتیبان فارسی انجمن ساز IPS

 

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

در در ۱۴۰۰/۵/۱۶ در 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

پشتیبان فارسی انجمن ساز IPS

 

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

  • مدیر افتخاری
  • راه حل
در 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 قرار بدید.

  • پسند 2
  • تشکر 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .
توجه: مطلب ارسالی شما پس از تایید مدیریت برای همه قابل رویت خواهد بود.

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

 اشتراک گذاری

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

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

×
  • اضافه کردن...