How do I move an image to the left? - html

I am very new to coding still and I'm testing out a website I made. I need some help on a way to move images where I want. As you can see the gif is out of place with the caption, I need the image to be directly centered under the caption. Here is the code. Beware some of the code is copy pasted for example the galaxy background.
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.space {
background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
border: 1px dashed purple;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.stars1 {
animation: space 180s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}
.stars2 {
animation: space 240s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}
.stars3 {
animation: space 300s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}
.earth_figure {
display: flex;
flex-direction: column-reverse;
}
#keyframes space {
40% {
opacity: 0.75;
}
50% {
opacity: 0.25;
}
60% {
opacity: 0.75;
}
100% {
transform: rotate(360deg);
}
}
#import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
<!DOCTYPE html>
<html>
<head>
<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>
</head>
<body>
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>
<h1 style= "color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<figure class="earth_figure">
<img src="Earth Spinning.gif" height="329" width="329" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:300%">Earth</figcaption>
</figure>
<h2 style= "font-family:Arial;color:white;">
</body>
</html>


Check this out...
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.space {
background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
border: 1px dashed purple;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.stars1 {
animation: space 180s ease-in-out infinite;
background-image:
radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)),
radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)),
radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}
.stars2 {
animation: space 240s ease-in-out infinite;
background-image:
radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)),
radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)),
radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)),
radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}
.stars3 {
animation: space 300s ease-in-out infinite;
background-image:
radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)),
radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)),
radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)),
radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}
.earth_figure {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
#planet-wrapper{
display: flex;
flex-direction: row;
justify-content: space-around;
}
#keyframes space {
40% {
opacity: 0.75;
}
50% {
opacity: 0.25;
}
60% {
opacity: 0.75;
}
100% {
transform: rotate(360deg);
}
}
#import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>
<h1 style= "color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<div id="planet-wrapper">
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Earth</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Mars</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Jupiter</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Saturn</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Uranus</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Neptune</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Mercury</figcaption>
</figure>
<figure class="earth_figure">
<img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:200%">Venus</figcaption>
</figure>
</div>
<h2 style= "font-family:Arial;color:white;">


.earth_figure {
display: flex;
flex-direction: column-reverse;
text-align: center;
}
.earth_figure img {
display: flex;
flex-direction: column-reverse;
position: absolute;
bottom: 0;
left: 30%;
}
mabe try this
https://jsfiddle.net/m8t5qzy2/


Your HTML structure is not correct, try to see this code
#import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.space {
background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
border: 1px dashed purple;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.stars1 {
animation: space 180s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}
.stars2 {
animation: space 240s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}
.stars3 {
animation: space 300s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}
.earth_figure {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.earth_figure h1 {
position: absolute;
top: 40%;
text-align: center;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}
.earth_figure h1:nth-of-type(2) {
top: 55%;
}
#keyframes space {
40% {
opacity: 0.75;
}
50% {
opacity: 0.25;
}
60% {
opacity: 0.75;
}
100% {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Space</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>
<link rel="stylesheet" href="Space 2.css">
</head>
<body>
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>
<figure class="earth_figure">
<img src="https://cdn.pixabay.com/photo/2020/07/23/15/06/mobile-phone-5431597__340.jpg" height="329" width="329" alt="Earth">
<h1 style= "color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<h1 style="color:white;font-family:Orbitron;font-size:300%">Earth</h1>
</figure>
<h2 style= "font-family:Arial;color:white;"> </h2>
</body>
</html>

Related

Change shape of gradient progress bar

I have a gradient progress bar. My code is as follows:
CSS:
.progressbar {
height: 15px;
border-radius: 1em;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat-x,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
HTML:
<div class="progressbar" style="width:80%;"></div>
I want to keep it as gradient bar only but just want to change shape of progress bar. I want shape of progress bar as arrow as shown in image attached.How I can change shape of progress bar? .

It's a difficult one, and this workaround will not work if you don't use a solid background. But here's the trick done with pseudo elements. Hope it helps.
More info about CSS triangles here.
.progressbar {
position: relative; /* for position absolute of pseudo element work */
height: 56px;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
.progressbar:after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 28px solid white; /* Your background color*/
border-bottom: 28px solid white; /* Your background color*/
border-left: 28px solid transparent;
}
.progressbar:before {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 28px solid white; /* Your background color*/
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
<div class="progressbar" style="width:80%;"></div>

CSS: how to implement loading bar animation

So I wanted to copy a animated loading bar from here: https://www.cssscript.com/demo/animated-progress-bar-component-with-pure-css/
But my loading bar is not animating.
What's wrong with it?
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>

You forgot to add the animation to the CSS script.
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0.125) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255,255,255,0.125) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0,0,0,0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
/* Must Include the animation below */
#-webkit-keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#-webkit-keyframes cssProgressActiveRight {
0% {
background-position:0 0
}
100% {
background-position:-35px -35px
}
}
#keyframes cssProgressActiveRight {
0% {
background-position:0 0
}
100% {
background-position:-35px -35px
}
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Loading Bar</title>
</head>
<body>
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</body>
</html>

Your say that .loading-bar-animation has the animation cssProgressActive. Problem is that you don't define this animation. After research this animation is this one and is normaly defined in the cssProgress.css file. Are you sure that you have imported it ?
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
#keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>

I think you didn't include the CSS and your wrappers are not set properly.
Here how to make it work:
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<link rel="stylesheet" href="https://www.cssscript.com/demo/animated-progress-bar-component-with-pure-css/assets/css/cssProgress.css">
<div class="cssProgress">
<div class="progress1">
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
</div>
</div>

You forgot to copy the animation
#-webkit-keyframes
cssProgressActive { 0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#keyframes
cssProgressActive { 0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<div class="cssProgress">
<div class="progress1">
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
</div>
</div>

Why do progress bars not load in IE?

I have been devloping a website but can not get a progress bar of any sorts to load in Internet Explorer. I tried both the basic progress bar in html, as well as a more complex CSS one, both of which did not work. I have 3 scripts, the first of which is the html code for the basic progress bar, as well as 4 of the more complex ones. The second script is the CSS styling for the more complex bar. Finally I have my run file which is used to live update the site I am working on. I am running the site on Apache 2.4.10 and it functions properly in both Firefox and Google Chrome. When trying in Internet Explorer, all that loads is a single black rectangle, instead of 4 actual bars, and one of the smaller progress bars. Please let me know if you see the flaw in my code or if you have the fix to the problem.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="progressbarstyle.css">
</head>
<title> Test</title>
<style type="text/css">
</style>
</head>
<body>
<progress max="100" value="10"></progress><br/>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 40%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 50%" > </span>
</div>
</body>
</html>
<script>
This is the CSS
p {color: white;
background-color: black;}
body {background-color: #F5F5DC; }
.meter {
float: left;
height: 500px;
width: 50px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
position:relative;
overflow: hidden;
}
.progress-load {
display: block;
height: 100%;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
center right,
center right,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
position:absolute;
left: 0;
bottom: 0;
width: 100%;
}
.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear,
left top,left bottom,color-stop(0.#f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(right, #f0a3a3, #f42323);
background-image: -moz-linear-gradient(right, #f0a3a3, #f42323);
background-image: -ms-linear-gradient(right, #f0a3a3, #f42323);
background-image: -o-linear-gradient(right, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-webkit-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-ms-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-o-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
And finally here is my run file
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari php<!-- include('test.php');--> ?>
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Progress.html",true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader( "If-Modified-Since", "Sat, 01 Jan 2000 00:00:00 GMT" );
xmlhttp.send(null);
//showCustomer('ALFKI');
setTimeout(function(){showCustomer('load')}, 1500);
}
</script>
</head>
<body onLoad="showCustomer('Load')">
<div id="txtHint"></div>
</body>
</html>

-moz- prefix for scrollbar not working in firefox

I am trying to change scrollbar style. it is working in chrome and opera but not working in firefox.
my code for webkit look like this :
body::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb
{
background-color: #2CC185;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
and for mozilla like this :
body::-moz-scrollbar-track
{
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-moz-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-moz-scrollbar-thumb
{
background-color: #2CC185;
background-image: -moz-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
it is not working for firefox any Idea please.

How can I make this progress bar with just CSS?

Can I make the progress bar below by using CSS only, that is, without using any images? In the second case, one can round the green corners on the left side of the div and not round them on the right side. However, is there a solution for the first and third case without resorting to an external image?
Note, that there should be a smooth transition from the bar being completely empty to being completely green.

Css Tricks has a good article showing how you would achieve this.
Example
Re: Comment
Looks pretty close to me
Notice I have changed the widths of the span elements.
LAST UPDATE
OP wanted it to look more like his example
Change the following two lines of CSS in the demo
.meter {
background: none repeat scroll 0 0 #555555;
border-radius: 25px 25px 25px 25px;
box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) inset;
height: 40px;
margin: 60px 0 20px;
overflow: hidden; /* remove padding and add me */
position: relative;
}
.meter > span {
background-color: #2BC253;
background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
border-radius: 20px 0px 0px 20px; /* change me */
box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
display: block;
height: 100%;
overflow: hidden;
position: relative;
}

If you put the green bar inside the grey container and set overflow: hidden on the grey container then the green bar will be clipped when you give the container rounded corners.

To see it in action in the fiddle, toggle the checkbox to kick off the animation. I've set it to 3 seconds. Will work in all modern browsers and IE10. If you wind up needing JavaScript to kick off an event, or keep track of the time it should run, just change the CSS width of .progress-color.
Here is the fiddle
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar</title>
<style>
.progress-bar {
margin: 5px;
width: 500px;
background-color: #DDD;
overflow: hidden;
border: 1px solid #BBB;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.progress-color {
background-color: lime;
background-size: 40px 40px;
width: 0%;
height: 30px;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
-webkit-animation: bganim 3s linear 2s infinite;
-moz-animation: bganim 3s linear 2s infinite;
-ms-animation: bganim 3s linear 2s infinite;
-o-animation: bganim 3s linear 2s infinite;
animation: bganim 3s linear 2s infinite;
}
:checked + .progress-bar .progress-color{
width: 100%;
}
</style>
</head>
<body>
<input type="checkbox" value="Install" /> Start Installation:
<div class="progress-bar">
<div class="progress-color"></div>
</div>
</body>
</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bar {
width: 300px;
height: 50px;
border-radius: 25px;
background-color: rgba(231, 56, 39, 0.5);
overflow: hidden;
}
.progress {
width: 96%;
height: 100%;
background-color: #e73827;
}
<div class="bar">
<div class="progress"></div>
</div>

If you don't like to use javascript or images only possible way i can think of is using css3 border radius style. But the problem is old browsers doesn't support for css3
example:
border-radius: 5px 10px 5px 10px
using above style you can round what ever the corner you like individually.
for more details follow this link

this a simple, smooth, and bootifull loader css3
JSFiddle here
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<style>
#import url(http://fonts.googleapis.com/css?family=Aldrich);
body{background:#333;}
.progressbar{
position:relative;
display:block;
width:560px;
height:20px;
padding:10px 20px;
border-bottom:1px solid rgba(255,255,255,0.25);
border-radius:16px;
margin:40px auto;
-webkit-box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.progressbar:before{
position:absolute;
display:block;
content:"";
width:558px;
height:18px;
top:10px;
left:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:#222;
-webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);;
box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
border:1px solid rgba(0,0,0,0.8);
}
.bar {
position:absolute;
display:block;
width:0px;
height:16px;
top:12px;
left:22px;
background: rgb(126,234,25);
background: -moz-linear-gradient(top, rgba(126,234,25,1) 0%, rgba(83,173,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,234,25,1)), color-stop(100%,rgba(83,173,0,1)));
background: -webkit-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background: -o-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background: -ms-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background: linear-gradient(to bottom, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eea19', endColorstr='#53ad00',GradientType=0 );
-webkit-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
overflow:hidden;
}
.bar.color2 {
background: rgb(229,195,25);
background: -moz-linear-gradient(top, rgba(229,195,25,1) 0%, rgba(168,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,195,25,1)), color-stop(100%,rgba(168,140,0,1)));
background: -webkit-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background: -o-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background: -ms-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background: linear-gradient(to bottom, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5c319', endColorstr='#a88c00',GradientType=0 );
-webkit-box-shadow: 0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar.color3 {
background: rgb(232,25,87);
background: -moz-linear-gradient(top, rgba(232,25,87,1) 0%, rgba(170,0,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,25,87,1)), color-stop(100%,rgba(170,0,51,1)));
background: -webkit-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background: -o-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background: -ms-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background: linear-gradient(to bottom, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e81957', endColorstr='#aa0033',GradientType=0 );
-webkit-box-shadow: 0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar.color4 {
background: rgb(24,109,226);
background: -moz-linear-gradient(top, rgba(24,109,226,1) 0%, rgba(0,69,165,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,109,226,1)), color-stop(100%,rgba(0,69,165,1)));
background: -webkit-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background: -o-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background: -ms-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background: linear-gradient(to bottom, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#186de2', endColorstr='#0045a5',GradientType=0 );
-webkit-box-shadow: 0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar:before {
position:absolute;
display:block;
content:"";
width:606px;
height:150%;
top:-25%;
left:-25px;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(50%,rgba(255,255,255,0.01)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.bar:after {
position:absolute;
display:block;
content:"";
width:64px;
height:16px;
right:0;
top:0;
-webkit-border-radius: 0px 16px 16px 0px;
border-radius: 0px 16px 16px 0px;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(98%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.bar span {
position:absolute;
display:block;
width:100%;
height:64px;
-webkit-border-radius:16px;
border-radius:16px;
top:0;
left:0;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABACAYAAAD7/UK9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjdFQ0M2MzdDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjdFQ0M2MzhDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyN0VDQzYzNUNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyN0VDQzYzNkNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoTG0pMAABr+SURBVHjavJ1nj1zX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") 0 0;
-webkit-animation: sparkle 1500ms linear infinite;
-moz-animation: sparkle 1500ms linear infinite;
-o-animation: sparkle 1500ms linear infinite;
animation: sparkle 1500ms linear infinite;
opacity:0.2;
}
.label {
font-family: 'Aldrich', sans-serif;
position:absolute;
display:block;
width:40px;
height:30px;
line-height:30px;
top:38px;
left:0px;
background: rgb(76,76,76);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(38,38,38,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(100%,rgba(38,38,38,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 );
font-weight:bold;
font-size:12px;
color:#fff;
text-align:center;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
text-shadow: 0px -1px 0px #000000,0px 1px 1px #000000;
filter: dropshadow(color=#000000, offx=0, offy=-1);
}
.label span {
position:absolute;
display:block;
width:12px;
height:9px;
top:-9px;
left:14px;
background:transparent;
overflow:hidden;
}
.label span:before {
position:absolute;
display:block;
content:"";
width:8px;
height:8px;
top:4px;
left:2px;
border:1px solid rgba(0,0,0,0.5);
background: rgb(86,86,86);
background: -moz-linear-gradient(-45deg, rgba(86,86,86,1) 0%, rgba(76,76,76,1) 50%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(50%,rgba(76,76,76,1)));
background: -webkit-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background: -o-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background: -ms-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background: linear-gradient(135deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#4c4c4c',GradientType=1 );
-webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
#-webkit-keyframes sparkle {
from {background-position: 0 0;}
to {background-position: 0 -64px;}
}
#-moz-keyframes sparkle {
from {background-position: 0 0;}
to {background-position: 0 -64px;}
}
#-o-keyframes sparkle {
from {background-position: 0 0;}
to {background-position: 0 -64px;}
}
#keyframes sparkle {
from {background-position: 0 0;}
to {background-position: 0 -64px;}
}
</style>
<script language="javascript">
$(function() {
$('.progressbar').each(function(){
var t = $(this),
dataperc = t.attr('data-perc'),
barperc = Math.round(dataperc*5.56);
t.find('.bar').animate({width:barperc}, dataperc*25);
t.find('.label').append('<div class="perc"></div>');
function perc() {
var length = t.find('.bar').css('width'),
perc = Math.round(parseInt(length)/5.56),
labelpos = (parseInt(length)-2);
t.find('.label').css('left', labelpos);
t.find('.perc').text(perc+'%');
}
perc();
setInterval(perc, 0);
});
});
</script>
</head>
<body>
<div class="progressbar" data-perc="100">
<div class="bar"><span></span></div>
<div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="75">
<div class="bar color2"><span></span></div>
<div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="50">
<div class="bar color3"><span></span></div>
<div class="label"><span></span></div>
</div>
<div class="progressbar" data-perc="25">
<div class="bar color4"><span></span></div>
<div class="label"><span></span></div>
</div>
</body>
</html>