|
 |
| |
ใครพอมีวิธีทำ progressbar สวยๆ ซัก 2 วินาทีมั้ย ใช้อะไรก็ได้ ขอแค่ progressbar สวยๆพอ เอามาแปะหน้าเว็บๆได้ กำหนดขนาดได้ |
| |
 |
|
|
 |
 |
|
เฮ้อ...คนแก่ก็เป็นแบบนี้แหล่ะ ชอบอะไรง่ายๆ ขอให้เสร็จไวๆ แบบโค้ดาำเร็จรูปเนี่ยจะชอบมากเลย
|
 |
 |
 |
 |
| Date :
2015-03-19 16:43:12 |
By :
ศักดินา |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
http://jqueryui.com/progressbar/#label
|
| |
|
|
| |
| Date :
2015-03-19 16:46:30 |
By :
meannerss |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
http://codepen.io/alecspopa/pen/bCjfK code จากเว็บนี้ต้องทำยังไงคัพ เอามาแปะแล้วแต่มันไม่รันอะ
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
html{text-align:center;}
progress[value]{width:300px;height:50px;border:1px solid #ccc;border-radius:2px;margin:100px 0;color:#fff;
background: -moz-linear-gradient(left, #0057a9 0%, #0057a9 19%, transparent 19%, transparent 21%, #79ce00 21%, #79ce00 39%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 59%, transparent 61%, #ffb750 61%, #ffb750 79%, transparent 79%, transparent 81%, #ff0000 81%, #ff0000 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0057a9), color-stop(19%,#0057a9), color-stop(19%,transparent), color-stop(21%,transparent), color-stop(21%,#79ce00), color-stop(39%,#79ce00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(59%,transparent), color-stop(61%,transparent), color-stop(61%,#ffb750), color-stop(79%,#ffb750), color-stop(79%,transparent), color-stop(81%,transparent), color-stop(81%,#ff0000), color-stop(100%,#ff0000));
background: -webkit-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
background: -o-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
background: -ms-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
background: linear-gradient(to right, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
progress[value]::-webkit-progress-bar{background-color:transparent;position:relative;}
progress[value]::-webkit-progress-value{width:100%;background-color:#fff;background-size:100%;position:relative;overflow:hidden;
-webkit-transition:width 0.6s ease;
-moz-transition:width 0.6s ease;
-o-transition:width 0.6s ease;
transition:width 0.6s ease;
}
</style>
<script type="text/javascript">
/**
* This code is only used for animating the progress bar
* it can be safely removed
* as all styling is done in CSS
*/
var progressVal = $('progress').val(),
progressStep = 20,
progressDirection = 1;
setInterval(function() {
console.log(progressDirection, progressVal);
if (progressDirection > 0 && progressVal < 100) {
progressVal += progressStep;
$('progress').val(progressVal);
} else if (progressDirection < 0 && progressVal > 0) {
progressVal -= progressStep;
$('progress').val(progressVal);
} else if (progressVal == 100) {
progressDirection = -1;
} else if (progressVal == 0) {
progressDirection = 1;
}
}, 500)
</script>
</head>
<body>
<progress value="100" max="100"></progress>
<!--
Note: values must be reversed in order for this to work.
Meaning progress bar should have a value of 0 when it should be filled completly and vice versa.
-->
</body>
</html>
|
| |
|
|
| |
| Date :
2015-03-19 16:56:10 |
By :
paravatee |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
