From menubar in notepad++ select new from file menu.Next save as command from File menu.Then please give it a name in file name field e.g(Progressber.html).
Now you simply copy the code below & pase it in your Progressber.html.After that from run menu select any browser e.g launch in google crome.
Style#1 : Creating progressbar wwith html & css3
Style#2: Android Style ProgressBar
Style#3: Android Apps Install Style ProgressBar
Style#4 : Creating a progressbar for player
Style#5 : How to create progressbar for player
Style#6 :Making progressbar in css3
Style#7 :Creating a Progressbar using html5
Ok boss, Please Try All Those Code Above.Thanks a lot for visiting me.To Go Home Page Click Home.
Now you simply copy the code below & pase it in your Progressber.html.After that from run menu select any browser e.g launch in google crome.
Style#1 : Creating progressbar wwith html & css3
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#progressbar {
width: 100%;
height: 15px;
background-color: #eee;
padding: 2px;
margin: .6em 0;
border: 1px #000 double;
clear: both;
}
#progress {
background: #A1C969; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
filter: alpha(opacity=25);
}
@-webkit-keyframes progress {
from { }
to { width: 36% }
}
@-moz-keyframes progress {
from { }
to { width: 36% }
}
@-ms-keyframes progress {
from { }
to { width: 36% }
}
@keyframes progress {
from { }
to { width: 36% }
}
body {
height:300px;
perspective:400;
background-size:cover;
}
</style>
</head>
<body>
<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>
</body>
</html>
<html>
<head>
<style type="text/css">
#progressbar {
width: 100%;
height: 15px;
background-color: #eee;
padding: 2px;
margin: .6em 0;
border: 1px #000 double;
clear: both;
}
#progress {
background: #A1C969; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
filter: alpha(opacity=25);
}
@-webkit-keyframes progress {
from { }
to { width: 36% }
}
@-moz-keyframes progress {
from { }
to { width: 36% }
}
@-ms-keyframes progress {
from { }
to { width: 36% }
}
@keyframes progress {
from { }
to { width: 36% }
}
body {
height:300px;
perspective:400;
background-size:cover;
}
</style>
</head>
<body>
<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>
</body>
</html>
Style#2: Android Style ProgressBar
<!DOCTYPE html>
<html>
<style type="text/css">
body {
padding: 20%;
}
.bar {
width: 100%;
border-bottom: 1px solid #cccccc;
}
.progress {
position: relative;
background: #3498db;
height: 3px;
transition: 0.2s ease-in-out;
margin-bottom: -2px;
}
.progress:after {
content: '';
position: absolute;
right: -9px;
top: -9px;
height: 20px;
width: 20px;border-radius: 10px;
background: -moz-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(52,152,219,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#percent {
margin: 50px auto;
width: 100%;
text-align: center;
font-size: 50px;
font-family: 'Sirin Stencil', cursive;
}
</style>
<body>
<link href='http://fonts.googleapis.com/css?family=Sirin+Stencil' rel='stylesheet' type='text/css'>
<div id="percent">
0
</div>
<div class="bar">
<div id="progress" class="progress" style="width:0%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
h = 0;
function animChiffre(DiffJour) {
var h = document.getElementById("percent").innerHTML;
if ( h<DiffJour ) {
h++;
document.getElementById("percent").innerHTML = h;
document.getElementById("progress").style.width = h + "%";
}
}
window.setInterval("animChiffre(100)", 180);
</script>
</body>
</html>
<html>
<style type="text/css">
body {
padding: 20%;
}
.bar {
width: 100%;
border-bottom: 1px solid #cccccc;
}
.progress {
position: relative;
background: #3498db;
height: 3px;
transition: 0.2s ease-in-out;
margin-bottom: -2px;
}
.progress:after {
content: '';
position: absolute;
right: -9px;
top: -9px;
height: 20px;
width: 20px;border-radius: 10px;
background: -moz-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(52,152,219,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(52,152,219,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#percent {
margin: 50px auto;
width: 100%;
text-align: center;
font-size: 50px;
font-family: 'Sirin Stencil', cursive;
}
</style>
<body>
<link href='http://fonts.googleapis.com/css?family=Sirin+Stencil' rel='stylesheet' type='text/css'>
<div id="percent">
0
</div>
<div class="bar">
<div id="progress" class="progress" style="width:0%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
h = 0;
function animChiffre(DiffJour) {
var h = document.getElementById("percent").innerHTML;
if ( h<DiffJour ) {
h++;
document.getElementById("percent").innerHTML = h;
document.getElementById("progress").style.width = h + "%";
}
}
window.setInterval("animChiffre(100)", 180);
</script>
</body>
</html>
Style#3: Android Apps Install Style ProgressBar
<!DOCTYPE html>
<html>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
body{
background:#222;
margin: 40px 50px;
}
h1{
color:#4a8df8;
font-family: 'Raleway', cursive;
font-weight:100;
font-stretch:normal;
font-size:3em;
}
.slider{
position:absolute;
width:400px;
height:2px;
margin-top:-30px
}
.line{
position:absolute;
background:#4a8df8;
width:400px;
height:2px;
}
.break{
position:absolute;
background:#222;
width:6px;
height:2px;
}
.dot1{
-webkit-animation: loading 2s infinite;
-moz-animation: loading 2s infinite;
-ms-animation: loading 2s infinite;
-o-animation: loading 2s infinite;
animation: loading 2s infinite;
}
.dot2{
-webkit-animation: loading 2s 0.5s infinite;
-moz-animation: loading 2s 0.5s infinite;
-ms-animation: loading 2s 0.5s infinite;
-o-animation: loading 2s 0.5s infinite;
animation: loading 2s 0.5s infinite;
}
.dot3{
-webkit-animation: loading 2s 1s infinite;
-moz-animation: loading 2s 1s infinite;
-ms-animation: loading 2s 1s infinite;
-o-animation: loading 2s 1s infinite;
animation: loading 2s 1s infinite;
}
@keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-moz-keyframes loading {
from { left: 0; }
to { left: 400px; }
}
@-webkit-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-ms-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-o-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
</style>
<body>
<h1>Just a moment...</h1>
<div class="slider">
<div class="line"></div>
<div class="break dot1"></div>
<div class="break dot2"></div>
<div class="break dot3"></div>
</div>
</body>
</html>
<html>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
body{
background:#222;
margin: 40px 50px;
}
h1{
color:#4a8df8;
font-family: 'Raleway', cursive;
font-weight:100;
font-stretch:normal;
font-size:3em;
}
.slider{
position:absolute;
width:400px;
height:2px;
margin-top:-30px
}
.line{
position:absolute;
background:#4a8df8;
width:400px;
height:2px;
}
.break{
position:absolute;
background:#222;
width:6px;
height:2px;
}
.dot1{
-webkit-animation: loading 2s infinite;
-moz-animation: loading 2s infinite;
-ms-animation: loading 2s infinite;
-o-animation: loading 2s infinite;
animation: loading 2s infinite;
}
.dot2{
-webkit-animation: loading 2s 0.5s infinite;
-moz-animation: loading 2s 0.5s infinite;
-ms-animation: loading 2s 0.5s infinite;
-o-animation: loading 2s 0.5s infinite;
animation: loading 2s 0.5s infinite;
}
.dot3{
-webkit-animation: loading 2s 1s infinite;
-moz-animation: loading 2s 1s infinite;
-ms-animation: loading 2s 1s infinite;
-o-animation: loading 2s 1s infinite;
animation: loading 2s 1s infinite;
}
@keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-moz-keyframes loading {
from { left: 0; }
to { left: 400px; }
}
@-webkit-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-ms-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-o-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
</style>
<body>
<h1>Just a moment...</h1>
<div class="slider">
<div class="line"></div>
<div class="break dot1"></div>
<div class="break dot2"></div>
<div class="break dot3"></div>
</div>
</body>
</html>
Style#4 : Creating a progressbar for player
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
// VAR
@D:280px; // size control
@R:(@D/2);
@B:(@R/10);
// opacity
@O: 1;
html,
body{
height:100%;
}
body{
background:rgb(250,250,200);
}
.diafragma{
background:rgb(255,255,255);
border-radius:100%;
border:2px solid rgb(250,250,200);
box-shadow: 0 0 @B 2px rgb(250,250,150);
cursor:pointer;
position:absolute;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@D;
height:@D;
overflow:hidden;
}
.diafragma:hover > .hoja{
box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
inset @B 0 0 rgba(250, 200, 0, @O),
inset 0 -@B 0 rgba(250, 150, 0, @O),
inset -@B 0 0 rgba(250, 100, 0, @O);
}
.hoja{
border-radius:100%;
box-shadow: inset 0 @R 0 rgba(200, 200, 0, @O/2),
inset @R 0 0 rgba(150, 150, 0, @O/2),
inset 0 -@R 0 rgba(200, 100, 0, @O/2),
inset -@R 0 0 rgba(250, 250, 0, @O/2);
position:absolute;
width:100%;
height:100%;
transition:box-shadow 1s;
}
.giro{
transform:rotateZ(45deg);
}
.text{
color:rgb(200,200,200);
position:absolute;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/3;
line-height:@D;
width:100%;
-webkit-font-smoothing: antialiased;
}
/* Moving on to the styling, we'll start with the main progress bar first and then the value part of it. After that, we'll do some experiments :D */
body {
background: #322c35;
}
progress {
width: 400px;
height: 14px;
margin: 50px auto;
display: block;
/* Important Thing */
-webkit-appearance: none;
border: none;
}
/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
background: black;
border-radius: 50px;
padding: 2px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
/* Now the value part */
progress::-webkit-progress-value {
border-radius: 50px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(left, #ba7448, #c4672d);
/* Looks great, now animating it */
background-size: 25px 14px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties */
@-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}
/* Prefix-free was creating issues with the animation */
</style>
</head>
<body>
<progress max="100" value="50"></progress>
<div class="diafragma">
<div class="text">CSS3</div>
<div class="hoja"></div>
<div class="hoja giro"></div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
// VAR
@D:280px; // size control
@R:(@D/2);
@B:(@R/10);
// opacity
@O: 1;
html,
body{
height:100%;
}
body{
background:rgb(250,250,200);
}
.diafragma{
background:rgb(255,255,255);
border-radius:100%;
border:2px solid rgb(250,250,200);
box-shadow: 0 0 @B 2px rgb(250,250,150);
cursor:pointer;
position:absolute;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@D;
height:@D;
overflow:hidden;
}
.diafragma:hover > .hoja{
box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
inset @B 0 0 rgba(250, 200, 0, @O),
inset 0 -@B 0 rgba(250, 150, 0, @O),
inset -@B 0 0 rgba(250, 100, 0, @O);
}
.hoja{
border-radius:100%;
box-shadow: inset 0 @R 0 rgba(200, 200, 0, @O/2),
inset @R 0 0 rgba(150, 150, 0, @O/2),
inset 0 -@R 0 rgba(200, 100, 0, @O/2),
inset -@R 0 0 rgba(250, 250, 0, @O/2);
position:absolute;
width:100%;
height:100%;
transition:box-shadow 1s;
}
.giro{
transform:rotateZ(45deg);
}
.text{
color:rgb(200,200,200);
position:absolute;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/3;
line-height:@D;
width:100%;
-webkit-font-smoothing: antialiased;
}
/* Moving on to the styling, we'll start with the main progress bar first and then the value part of it. After that, we'll do some experiments :D */
body {
background: #322c35;
}
progress {
width: 400px;
height: 14px;
margin: 50px auto;
display: block;
/* Important Thing */
-webkit-appearance: none;
border: none;
}
/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
background: black;
border-radius: 50px;
padding: 2px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
/* Now the value part */
progress::-webkit-progress-value {
border-radius: 50px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(left, #ba7448, #c4672d);
/* Looks great, now animating it */
background-size: 25px 14px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties */
@-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}
/* Prefix-free was creating issues with the animation */
</style>
</head>
<body>
<progress max="100" value="50"></progress>
<div class="diafragma">
<div class="text">CSS3</div>
<div class="hoja"></div>
<div class="hoja giro"></div>
</div>
</body>
</html>
Style#5 : How to create progressbar for player
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: #738394;
}
.player .seek{
width: 70%;
height: 6px;
position: absolute;
top: 50px;
left: 140px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
-moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
background: #50555a;
background: -moz-linear-gradient(top, #50555a 0%, #727881 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#50555a), color-stop(100%,#727881));
background: -webkit-linear-gradient(top, #50555a 0%,#727881 100%);
background: -o-linear-gradient(top, #50555a 0%,#727881 100%);
background: -ms-linear-gradient(top, #50555a 0%,#727881 100%);
background: linear-gradient(top, #50555a 0%,#727881 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50555a', endColorstr='#727881',GradientType=0 );
}
.player .seek .progress {
height: 6px;
width: 6px;
position: absolute;
bottom: 0;
left: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
-webkit-animation: grow 2s linear infinite;
-moz-animation: grow 2s linear infinite;
-o-animation: grow 2s linear infinite;
-ms-animation: grow 2s linear infinite;
animation: grow 2s linear infinite;
background: #e2e6ec;
background: -moz-linear-gradient(top, #e2e6ec 0%, #979ca3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e6ec), color-stop(100%,#979ca3));
background: -webkit-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: -o-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: -ms-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e6ec', endColorstr='#979ca3',GradientType=0 );
}
@-webkit-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-moz-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-ms-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-o-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
</style>
<script src="js/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Player progressbar</title>
</head>
<body>
<div class="player">
<span class="seek"><span class="progress"></span></span>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background: #738394;
}
.player .seek{
width: 70%;
height: 6px;
position: absolute;
top: 50px;
left: 140px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
-moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
box-shadow: 0px 1px 0px 0px rgba(255,255,255,.2);
background: #50555a;
background: -moz-linear-gradient(top, #50555a 0%, #727881 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#50555a), color-stop(100%,#727881));
background: -webkit-linear-gradient(top, #50555a 0%,#727881 100%);
background: -o-linear-gradient(top, #50555a 0%,#727881 100%);
background: -ms-linear-gradient(top, #50555a 0%,#727881 100%);
background: linear-gradient(top, #50555a 0%,#727881 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50555a', endColorstr='#727881',GradientType=0 );
}
.player .seek .progress {
height: 6px;
width: 6px;
position: absolute;
bottom: 0;
left: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,.4);
-webkit-animation: grow 2s linear infinite;
-moz-animation: grow 2s linear infinite;
-o-animation: grow 2s linear infinite;
-ms-animation: grow 2s linear infinite;
animation: grow 2s linear infinite;
background: #e2e6ec;
background: -moz-linear-gradient(top, #e2e6ec 0%, #979ca3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e6ec), color-stop(100%,#979ca3));
background: -webkit-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: -o-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: -ms-linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
background: linear-gradient(top, #e2e6ec 0%,#979ca3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e6ec', endColorstr='#979ca3',GradientType=0 );
}
@-webkit-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-moz-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-ms-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@-o-keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
@keyframes grow {
0% {width: 0;}
100% {width: 100%;}
}
</style>
<script src="js/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Player progressbar</title>
</head>
<body>
<div class="player">
<span class="seek"><span class="progress"></span></span>
</div>
</body>
</html>
Style#6 :Making progressbar in css3
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Metal Progress Bar</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
html, body {
min-height: 100%;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae);
}
.progress {
overflow: hidden;
margin: 120px auto;
padding: 0 15px;
width: 220px;
height: 34px;
background: #d3d5d9;
border-radius: 17px;
background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);
background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
}
.progress-val {
float: right;
margin-left: 15px;
font: bold 15px/34px Helvetica, Arial, sans-serif;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
.progress-bar {
display: block;
overflow: hidden;
height: 8px;
margin: 13px 0;
background: #b8b8b8;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}
.progress-in {
display: block;
min-width: 8px;
height: 8px;
background: #1997e6;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="progress">
<span class="progress-val">84%</span>
<span class="progress-bar"><span class="progress-in" style="width: 84%"></span></span>
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Metal Progress Bar</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
html, body {
min-height: 100%;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae);
}
.progress {
overflow: hidden;
margin: 120px auto;
padding: 0 15px;
width: 220px;
height: 34px;
background: #d3d5d9;
border-radius: 17px;
background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);
background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
}
.progress-val {
float: right;
margin-left: 15px;
font: bold 15px/34px Helvetica, Arial, sans-serif;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
.progress-bar {
display: block;
overflow: hidden;
height: 8px;
margin: 13px 0;
background: #b8b8b8;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}
.progress-in {
display: block;
min-width: 8px;
height: 8px;
background: #1997e6;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="progress">
<span class="progress-val">84%</span>
<span class="progress-bar"><span class="progress-in" style="width: 84%"></span></span>
</div>
</body>
</html>
Style#7 :Creating a Progressbar using html5
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>progressBar Style 7</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<style type="text/css">
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
*{
margin:0px;
padding:0px;
}
html{
background:#66CDAA;
}
.wrapper{
height:100px;
width:400px;
border-top-width:3px;
border-top-style:solid;
border-top-color:#F8F8FF;
background:transparent;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-200px;
position:fixed;
}
#progressBar{
height:3px;
width:0px;
top:-3px;
position:absolute;
background:green;
transition:width 10s ease-in;
-webkit-transition: width 5s ease-in;
-moz-transition: width 5s ease-in;
-o-transition: width 5s ease-in;
}
</style>
<script class="cssdeck" src="js/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="progressBar"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var html = $("html");
var progressBar = $("#progressBar");
html.hover(function(){
progressBar.css("width", "400px");
});
});
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>progressBar Style 7</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<style type="text/css">
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
*{
margin:0px;
padding:0px;
}
html{
background:#66CDAA;
}
.wrapper{
height:100px;
width:400px;
border-top-width:3px;
border-top-style:solid;
border-top-color:#F8F8FF;
background:transparent;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-200px;
position:fixed;
}
#progressBar{
height:3px;
width:0px;
top:-3px;
position:absolute;
background:green;
transition:width 10s ease-in;
-webkit-transition: width 5s ease-in;
-moz-transition: width 5s ease-in;
-o-transition: width 5s ease-in;
}
</style>
<script class="cssdeck" src="js/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="progressBar"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var html = $("html");
var progressBar = $("#progressBar");
html.hover(function(){
progressBar.css("width", "400px");
});
});
</script>
</body>
</html>
Ok boss, Please Try All Those Code Above.Thanks a lot for visiting me.To Go Home Page Click Home.
Comments
Post a Comment