Animated Progress Bar Using CSS And jQuery

hello readers in this articale we discuss how to create a progress bar

To Create Animated Progress Bar It Takes Only Two Steps:-
1. First, make a HTML file and define markup and script in it.
2. Second, make a CSS file for styling
Step 1.Make a HTML File
We make a HTML file and save it with a name ProgressBar.html

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

<html>

<head>

<link href="style.css" type="text/css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

function progressBar()

{

 $total_width=$("#progressbar_wrapper").width();

 $width_inc=$total_width/5;

 if($("#progressbar").width()<$total_width)

 {

  $width=$("#progressbar").width()+$width_inc;

  $("#progressbar").animate({width:''+$width+''},300);

 }

}

function reset_bar()

{

 $("#progressbar").animate({width:'0px'},300);

}

</script>

</head>

<body>

<center>

<div id="wrapper">

<div id="progressbar_div">

<div id="progressbar_wrapper">

 <div id="progressbar"></div>

</div>

<p>

<input type="button" value="Animate" onclick="progressBar();">

<input type="button" value="Reset" onclick="reset_bar();">

</p>

</div>

</div>

</center>

</body>

</html>

In this step we firstly create 2 divs, one for wrapper of progress bar and other is for progress bar. After this we need to create two buttons, one is for animate of progress and other is for reset the progress bar.
To animate progress bar we create progressBar() function, in this we get progress bar wrapper width and divide by 10 you can use any number then we check the progress bar width is smaller than its wrapper if yes we increase the progress bar width using animate function of jQuery(). To reset the progress bar we simply set progress bar width to 0 by calling reset_bar() function.

Step 2.Make a CSS file and define styling
We make a CSS file and save it with a name style.css

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

body

{

 margin:0 auto;

 padding:0px;

 text-align:center;

 width:100%;

 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;

 background-color:#ffffff;

}

#wrapper

{

 margin:0 auto;

 padding:0px;

 text-align:center;

 width:995px;

}

#progressbar_wrapper

{

 border:1px solid #333333;

 margin-left:345px;

 margin-top:20px;

 width:300px;

 height:35px;

 border-radius:3px;

 overflow:hidden;

}

#progressbar

{

 width:0px;

 height:35px;

 border-radius:0px;

 background-color:#333333;

}

#progressbar_div input[type="button"]

{

 background-color:#333333;

 border:none;

 width:150px;

 height:40px;

 color:white;

 border-radius:3px;

 border-bottom:3px solid #0B610B;

}

That’s all; this is how to create animated progress bar using CSS and jQuery. You can customize this code further as per your requirement.

KANSIRIS

Animated Progress Bar Using CSS And jQuery

0 comments:

Post a Comment

Complete Tutorials

Popular Posts

Labels