How can I make this progress bar with just CSS? - html
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>
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>
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>
CSS Button Unknownly Centered
Alright, I've got a button that I can't figure out why in the heck it's centring itself. My first suspicion was in the css, but any sort of align or position that I used/changed didn't work.
Here's the html and css. You'll probably be able to find it faster than I would.
(Also here's the jsfiddle link if anyone's interested: http://jsfiddle.net/takkun/63uktgyo/)
/* ROUNDED ONE */
.Gcheckbox {
/*CHANGES GRAY SQUARE DIMENSIONS*/
width: 16px;
height: 33px;
background: #ff0000;
/*GRAY SQUARE BACKGROUND FADER*/
background: linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -webkit-linear-gradient(top, 0000ff 100%, 0000ff 0%, #ff0000 0%);
background: -moz-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -o-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -ms-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 0px auto;
position: relative;
}
.Gcheckbox label {
cursor: pointer;
position: absolute;
width: 10px;
height: 10px;
/*MAKES THE GREEN CIRCLE A CIRCLE*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/********************************/
left: 3px;
top: 11.25px;
box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-webkit-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-moz-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
/*BEHIND GREEN CIRCLE BACKGROUND*/
background: -webkit-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -moz-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -o-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -ms-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#0000ff',GradientType=1 );
}
.Gcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #00bf00;
background: linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -webkit-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -o-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -ms-linear-gradient(top, #00ff00 0%, #00ff00 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 0px;
right: 0px;
-webkit-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
-moz-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
}
/*CHANGE HOVER EFFECT OPACITY*/
.Gcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.Gcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=checkbox] {
visibility:hidden;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styleCIRCLE.css" type="text/css">
<title>custom checkbox testing</title>
</head>
<body>
<!--styleCIRCLE -->
<div class="Gcheckbox">
<input type="checkbox" value="None" id="Gcheckbox" name="check" />
<label for="Gcheckbox"></label>
</div>
</body>
</html>
It is horizontally centered because the containing parent, .Gcheckbox has left and right automatic margins, which has the effect of horizontally centering the element.
By removing or commenting out that line, we will have the element aligning to the left as per default left-to-right layout behavior.
/* ROUNDED ONE */
.Gcheckbox {
/*CHANGES GRAY SQUARE DIMENSIONS*/
width: 16px;
height: 33px;
background: #ff0000;
/*GRAY SQUARE BACKGROUND FADER*/
background: linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -webkit-linear-gradient(top, 0000ff 100%, 0000ff 0%, #ff0000 0%);
background: -moz-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -o-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -ms-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
/*margin: 0px auto;*/
position: relative;
}
.Gcheckbox label {
cursor: pointer;
position: absolute;
width: 10px;
height: 10px;
/*MAKES THE GREEN CIRCLE A CIRCLE*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/********************************/
left: 3px;
top: 11.25px;
box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-webkit-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-moz-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
/*BEHIND GREEN CIRCLE BACKGROUND*/
background: -webkit-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -moz-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -o-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -ms-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#0000ff',GradientType=1 );
}
.Gcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #00bf00;
background: linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -webkit-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -o-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -ms-linear-gradient(top, #00ff00 0%, #00ff00 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 0px;
right: 0px;
-webkit-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
-moz-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
}
/*CHANGE HOVER EFFECT OPACITY*/
.Gcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.Gcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=checkbox] {
visibility:hidden;
}
<div class="Gcheckbox">
<input type="checkbox" value="None" id="Gcheckbox" name="check" />
<label for="Gcheckbox"></label>
</div>
It's the margin: 0px auto; on your .Gcheckbbox div. Remove that and it's all fine and dandy :)
Custom css button div issue
I'm trying to figure out why this custom css button I made, ONLY likes being within a div tag. Currently if I use a div for the button, I can not have anything else on the same line as the button without doing some css position stuff. If I have to as a last resort I will do that, but I want to see IF I can use another element, and why my button freaks out when you replace the div with anything else. You can take a look at the code here and see what I'm not seeing: http://jsfiddle.net/takkun/k1pz75t2/ <div class="Gcheckbox"> <input type="checkbox" value="None" id="Gcheckbox" name="check" /> <label for="Gcheckbox"></label> </div>
It's not so much that other elements won't work as wrappers as that they don't have the right styles to maintain the height you've set on the element. A span would work just fine if you also set display: inline-block; on it. As to other items not being on the same line, that's how block elements work by default: they take up as much space as they can width-wise. If you want other items on the same line you can set it to be inline-block like the previous span example or you can set it to be float: left;, etc. Whatever suits your particular needs.
Just add a style display: inline-block to the .Gcheckbox. That way, it will be able to be inserted in the flow of the text, but still render as an inline element. Demo
You may need to change the block behavior of the div tag to have another elements aside. You can change it to inline-block:
.Gcheckbox {
display: inline-block;
}
input[type=checkbox] {
visibility: hidden;
}
/* ROUNDED ONE */
.Gcheckbox {
/*CHANGES GRAY SQUARE DIMENSIONS*/
width: 16px;
display: inline-block;
height: 33px;
background: #ff0000;
/*GRAY SQUARE BACKGROUND FADER*/
background: linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -webkit-linear-gradient(top, 0000ff 100%, 0000ff 0%, #ff0000 0%);
background: -moz-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -o-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -ms-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
/* margin: 0px auto;*/
position: relative;
}
.Gcheckbox label {
cursor: pointer;
position: absolute;
width: 10px;
height: 10px;
/*MAKES THE GREEN CIRCLE A CIRCLE*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/********************************/
left: 3px;
top: 11.25px;
box-shadow: inset 0px 0px 0px rgba(239, 239, 238, 1), 0px 0px 0px rgba(239, 239, 238, 1);
-webkit-box-shadow: inset 0px 0px 0px rgba(239, 239, 238, 1), 0px 0px 0px rgba(239, 239, 238, 1);
-moz-box-shadow: inset 0px 0px 0px rgba(239, 239, 238, 1), 0px 0px 0px rgba(239, 239, 238, 1);
/*BEHIND GREEN CIRCLE BACKGROUND*/
background: -webkit-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -moz-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -o-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -ms-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #0000ff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#0000ff', GradientType=1);
}
.Gcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #00bf00;
background: linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -webkit-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -o-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -ms-linear-gradient(top, #00ff00 0%, #00ff00 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 0px;
right: 0px;
-webkit-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42, 171, 43);
-moz-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42, 171, 43);
box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42, 171, 43);
}
/*CHANGE HOVER EFFECT OPACITY*/
.Gcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.Gcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
h2 {
display: inline-block;
}
<div class="Gcheckbox">
<input type="checkbox" value="None" id="Gcheckbox" name="check" />
<label for="Gcheckbox"></label>
</div>
<h2>I'm aside the button</h2>
Also with that property on the classname you can use any other tag like span since now has the property to make the dimensions width and height to work.
Button background not changing on hover
I've created a button as a link using the usual methods, however, I am encountering a curious issue where the background colour is not changing on hover, when it should.
I've probably missed something really obvious, but I can't for the life of me find it.
The code in question is:
.downloadbtn {
color: white;
display: block;
margin: auto;
width: 250px;
height: 60px;
margin-top: 30px;
padding: 20px;
background: #06bce4;
background: -moz-linear-gradient(top, #06bce4 0%, #0589d4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06bce4), color-stop(100%,#0589d4));
background: -webkit-linear-gradient(top, #06bce4 0%,#0589d4 100%);
background: -o-linear-gradient(top, #06bce4 0%,#0589d4 100%);
background: -ms-linear-gradient(top, #06bce4 0%,#0589d4 100%);
background: linear-gradient(to bottom, #06bce4 0%,#0589d4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06bce4', endColorstr='#0589d4',GradientType=0 );
border: 1px solid #076ca0;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
}
.downloadbtn :hover {
background: green;
}
A JSFiddle is here: http://jsfiddle.net/4Xxaf/
Updated fiddle. You added a space between the selector and :hover http://jsfiddle.net/4Xxaf/1/
Remove the space in your code
.downloadbtn:hover{
background: green;
}