کانال ما در تلگرام
کد نمایش درصد پیشرفت کار

 

چندی پیش یک کد با موضوع نمایش پیشرفت روند کار در سپهنا قرار دادیم اکنون یک نمونه دیگر از این کدcss را قرار میدهیم . کد فوق مثلا سایر کدهای قبلی که به اشتراک گذاشتیم با css نوشته شده است همچنین این کد از کتابخانه jquery استفاده میکند که دوستان میتوانند در پروژه های خود یا وب سایت های شخصی از آن ها استفاده نمایند.

 

جهت استفاده از کد نمایش پیشرفت پروژه بر حسب درصد مراحل زیر را طی کنید :

در فایل css قالب خود اضافه کنید :

#container { text-align: center; margin: 20px; }h2 { color: #CCC; }a { text-decoration: none; color: #EC5C93; }.bar-main-container {  margin: 10px auto;  width: 300px;  height: 50px;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  font-family: sans-serif;  font-weight: normal;  font-size: 0.8em;  color: #FFF;}.wrap { padding: 8px; }.bar-percentage {  float: left;  background: rgba(0,0,0,0.13);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  padding: 9px 0px;  width: 18%;  height: 16px;}.bar-container {  float: right;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  height: 10px;  background: rgba(0,0,0,0.13);  width: 78%;  margin: 12px 0px;  overflow: hidden;}.bar {  float: left;  background: #FFF;  height: 100%;  -webkit-border-radius: 10px 0px 0px 10px;  -moz-border-radius: 10px 0px 0px 10px;  border-radius: 10px 0px 0px 10px;  -webkit-animation: wide 1s ease-in-out .2s;  -moz-transition: wide 1s ease-in-out .2s;  -o-transition: wide 1s ease-in-out .2s;  animation: wide 1s ease-in-out .2s;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=100);  -moz-opacity: 1;  -khtml-opacity: 1;  opacity: 1;}@-webkit-keyframes wide {  0%   { width: 0; opacity: 0.5; }  1% { width: 1%; }}@-moz-keyframes wide {  0%   { width: 0; opacity: 0.5; }  1% { width: 1%; }}@-o-keyframes wide {  0%   { width: 0; opacity: 0.5; }  1% { width: 1%; }}@keyframes wide {  0%   { width: 0; opacity: 0.5; }  1% { width: 1%; }}/* COLORS */.azure   { background: #38B1CC; }.emerald { background: #2CB299; }.violet  { background: #8E5D9F; }.yellow  { background: #EFC32F; }.red     { background: #E44C41; }

قبل از </head> قرار دهید :

  <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script><script>$('.bar-percentage[data-percentage]').each(function (i) {   var percentage = $(this).attr('data-percentage') + '%';   $(this).text(percentage) && $(this).siblings().children().css('width',percentage);});</script> 

جایی که میخواهید درصد نمایش پیشرفت کار نمایان شود قرار بدید :

<div id="container">    <div id="bar-1" class="bar-main-container azure">    <div class="wrap">      <div class="bar-percentage" data-percentage="38"></div>      <div class="bar-container">        <div class="bar"></div>      </div>    </div>  </div>    <div id="bar-2" class="bar-main-container emerald">    <div class="wrap">      <div class="bar-percentage" data-percentage="62"></div>      <div class="bar-container">        <div class="bar"></div>      </div>    </div>  </div>    <div id="bar-3" class="bar-main-container violet">    <div class="wrap">      <div class="bar-percentage" data-percentage="47"></div>      <div class="bar-container">        <div class="bar"></div>      </div>    </div>  </div>    <div id="bar-4" class="bar-main-container yellow">    <div class="wrap">      <div class="bar-percentage" data-percentage="85"></div>      <div class="bar-container">        <div class="bar"></div>      </div>    </div>  </div>    <div id="bar-5" class="bar-main-container red">    <div class="wrap">      <div class="bar-percentage" data-percentage="33"></div>      <div class="bar-container">        <div class="bar"></div>      </div>    </div>  </div>  </div>

+5
نام:*
ایمیل:


جستجو در سایت
برند مورد علاقه شما
تقویم سایت
<    «  مرداد 1399  »    >
شیدسچپج
 123
45678910
11121314151617
18192021222324
25262728293031