Friday 24 January 2014

stylish css3 progress bars using asp.net C#

02:26 By , , 1 comment

In this post i will explain creating simple progress bar using css3 and java script technique
This css3 progress bar adapted from  css-tricks.com . i am just explain how to access progress value from back end  (asp.net c# format). all the credit for this beautiful progress bar goes to css-tricks.com.
lets start our progress bar in asp.net .
first of all download css and javascript from css-tricks   
after download code and paste it  into your project directory the design view look like this format.

the aspx page and .cs section is shown below . 
<html>

<head>
 
 
 <title>Progress Bars</title>
 
 <link href="css/style.css" rel="stylesheet"></link>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript">
</script>
 <script>
  $(function() {
   $(".meter > span").each(function() {
    $(this)
     .data("origWidth", $(this).width())
     .width(0)
     .animate({
      width: $(this).data("origWidth")
     }, 1200);
   });
  });
 </script>
 
 <style>
     //paste  css style from index.html 
 </style>
</head>
<body>
 <div id="page-wrap">
 
   <h1>
Progress Bars</h1>
They should stretch fine to whatever the width of the container element is, 
   or just set it. Also they should stretch fine to 
whatever height you give .meter. <br />

  <div class="meter">
   <span id="progress" runat="server"></span>
  </div>
</div>
</body>
</html>
CS page shown below 
 protected void Page_Load(object sender, EventArgs e)
    {
        string progr = "40";
        progress.Attributes.CssStyle["width"] = progr + "%";
    }
After compiling and run the project we will get the output in this format ...


show action : you can download sample file.

1 comments: