12 خرداد 1392
کد خبر : 618

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

 

چندی پیش یک کد با موضوع نمایش پیشرفت روند کار در سپهنا قرار دادیم اکنون یک نمونه دیگر از این کد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>

وب / آموزش های وب sepahna 4 145 بازدید 0 نظر پرینت
  • +5

دیدگاه خود را ثبت کنید :

نام شما :*
ایمیل شما :
نظر شما :