پرتال دانشگاه شهید صیاد نزاجا

پنجره ای کوچک به روی فنآوری روز دنیا

خرید کتاب از گوگل

چاپ کتاب PDF

خرید کتاب از آمازون

خرید کتاب زبان اصلی

دانلود کتاب خارجی

دانلود کتاب لاتین

گت بلاگز لیست تکالیف و پروژه ها معرفی 5 ابزار برای ساخت Progress Bar بازگویی مطالب اضافی در مورد نوار پیشرفت

کد ساخت نوار پیشرفت همراه با توضیحات لازم

با سلام خدمت شما دوستان در این پست شما میتونید کد نوار پیشرفت (progress bar ) رو دریافت کنید سعی کردیم برای شما توضیحات تکمیلی درباره این ابزار رو بیان کنیم تا بتونید تا حدودی این ابزار رو ویرایش کنید پس در ادامه مطلب همراه ما باشید …

پیش نمایش

شما با دیدن فایل های کمکی زیر می توانید آموزشتان را تکمیل کنید:

فایل تصویری اول

فایل تصویری دوم


برای اینکه این کد رو بهتر توضیح بدیم به سه قسمت تقسیم میکنیم قسمت کد های جاوا اسکریپت , سی اس اس و اچ تی ام ال

کد زیر که یک تکه کد جی کوئری میباشد باید در قالب شما و در قسمت هد شما یعنی بعد از تگ < head >یا قبل از < /head > قرار گیرد لطفا این کد را ویرایش نفرمایید
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://dl.1learn.ir/admin/posts/greenpb/jquery.min.js"></script>
    <script>
        $(function() {
            $(".meter > span").each(function() {
                $(this)
                    .data("origWidth", $(this).width())
                    .width(0)
                    .animate({
                        width: $(this).data("origWidth")
                    }, 1200);
            });
        });
</script>
این کد زیر را نیز باید در قسمت هد قالب خود مانند حالت بالا قرار دهید حالا برای ویرایش این ابزار شما باید به نکات زیر توجه کنید
در خط سوم شما میتوانید مقدار 450 را هر مقدار دلخواه خود وارد کنید این مقدار طول کل ابزار شما میباشید که در مواقعی کاربردی است که ابزار دراز یا کوتاه میباشید و شما میخواهید متناسب با مکان خود آن را ویرایش کنید
نکته دوم ان است که شما میتوانید با عوض کرن مفدار 20 در خط ششم عرض ابزار خود را نیز تنظیم کنید
و نکته سوم اینکه برای فاصله دادن از سمت های بالا راست چپ و پایین به ابزار خود مقدار های عددی موجود در خط 8 را ویرایش کنید
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<style>
        #green{
             width: 450px;
         }
        .green {
            height: 20px;
            position: relative;
            margin: 5px 0px 5px 0px;
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            padding: 7px;
            -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
            -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
            box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        }
        .green > span {
            display: block;
            height: 100%;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(43,194,83);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(43,194,83)),
              color-stop(1, rgb(84,240,84))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(43,194,83) 37%,
              rgb(84,240,84) 69%
             );
            -webkit-box-shadow:
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow:
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow:
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
        }
        .green > span:after, .animate > span > span {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-image:
               -webkit-gradient(linear, 0 0, 100% 100%,
                  color-stop(.25, rgba(255, 255, 255, .2)),
                  color-stop(.25, transparent), color-stop(.5, transparent),
                  color-stop(.5, rgba(255, 255, 255, .2)),
                  color-stop(.75, rgba(255, 255, 255, .2)),
                  color-stop(.75, transparent), to(transparent)
               );
            background-image:
                -moz-linear-gradient(
                  -45deg,
                  rgba(255, 255, 255, .2) 25%,
                  transparent 25%,
                  transparent 50%,
                  rgba(255, 255, 255, .2) 50%,
                  rgba(255, 255, 255, .2) 75%,
                  transparent 75%,
                  transparent
               );
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            overflow: hidden;
        }
 
        .animate > span:after {
            display: none;
        }
 
        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 50px 50px;
            }
        }
 
    </style>
و در پایان کد زیر را در هر مکان از قالب یا پست های خود که دوست دارید استفاده کنید فقط به نکات زیر توجه کنید
در قطعه کد دوم هر مقداری را که در خط سوم قرار دادید همان مقدار را نیز برای این کد در خط دوم وارد کنید این به آن خاطر است که برخی از سیستم های وبلاگ دهی مشکل ایجاد میکنند لذا با این کار قطعا این مشکل برطرف خواهد شد
و نکته پایانی و مهم تر از همه اینکه مقدار درصد پیشرفت را در خط چهارم به جای مقدار 50 وارد کنید

1
2
3
4
5
6
7
<!-- طراحی توسط یک لرن http://www.1learn.ir-->
<div id="green" style="width:450px;">
<div class="green animate">
<span style="width: 50%"><span>
</div>
</div>
<!-- طراحی توسط یک لرن http://www.1learn.ir-->

نویسنده :

  • کتاب زبان اصلی J.R.R
  • کتاب خارجی معروف
  • قیمت کیندل
  • فروشگاه کتاب خارجی
  • خرید کتاب الکترونیکی خارجی
  • خرید کتاب خارجی آنلاین
  • خرید کتاب زبان اصلی قانون
  • کتاب های اقتصاد اورجینال
  • کتب کتابخانه وAPI زبان اصلی
  • کتاب های بازیهای کامپیوتری اورجینال
  • دانلود منابع مرجع اخلاق کسب و کار
  • خرید کتاب های کامپایلرها از آمازون
  • خرید کتاب زبان اصلی زبان مدلسازی
  • خرید کتاب زبان های برنامه نویسی زبان اصلی
  • خرید کتاب تکس لاتکس زبان اصلی
  • دانلود منابع مرجع نرم افزار آفیس
  • خرید کتاب نرم افزار های ادوبی زبان اصلی
  • منابع اورجینال نرم افزار ماکرومدیا
  • کتب نرم افزار CAD زبان اصلی
  • هاردکپی کتاب های محاسبات علمی
  • دانلود منابع مرجع شبکه