ถามเกี่ยวกับ เเถบความคืบหน้า 0-100% ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามเกี่ยวกับ เเถบความคืบหน้า 0-100% ครับ

ถามเกี่ยวกับ เเถบความคืบหน้า 0-100% ครับ
ตรงเเถบ % ถ้าไม่ถึง 50% ให้เป็นสีเเดง เราจะใส่โค้ด background ยังไงครับ
อีกอย่างครับถ้าถึง 100% ผมอยากให้มี  effect อะไรสักอย่างประมาณว่าถ้า100%ให้มันขยับได้ พอมีคำเเนะนำไหมครับ



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
	.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
p {
	text-align: center;
  margin-top: 0;
  margin-bottom: -1rem;
}

</style>
<body>
<?php
$test =100; 
$test1 =40;
 ?>
<div class="container">


<div class="row">

 <div class="card" style="width:150px;margin-top: 2%">
    <img class="card-img-top" src="img/02.jpg" alt="Card image" style="width:100%">
    <p>sad</p>
    <div class="card-body">
     <div class="progress-bar" style="width:<?php echo $test.'%'  ?>"><?php echo $test.'%'  ?></div>
    </div>
  </div>
  <br>
<div style="width: 2%; "></div>

 <div class="card" style="width:150px;margin-top: 2%">
    <img class="card-img-top" src="img/02.jpg" alt="Card image" style="width:100%">
    <p>sad</p>
    <div class="card-body">
     <div class="progress-bar" style="width:<?php echo $test1.'%'  ?>"><?php echo $test1.'%'  ?></div>
    </div>
  </div>
  <br>
<div style="width: 2%; "></div>



</div>

</div>
</body>
</html>


Golff Sinlapachai 29-03-2020 14:16:56

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ผมตั้งเงื่อนไขเเบบนี้ถูกไหมครับ ถ้าน้องกว่า50ให้เป็นสีเเดง

<div class="card-body">
     <div class="progress-bar" style=" <?php if ($row["id"]<=50){ ?>background-color: #ff0000;<?php} ?>
     width:<?php echo $row["id"].'%'; ?>">
     	<?php echo $row["id"].'%';  ?></div>
    </div>


Golff Sinlapachai 29-03-2020 15:01
 ความคิดเห็นที่ 2
ดูตัวอย่างนี้เป็นแวทาง

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>

<style type="text/css">
.my-bg-red{
	background-color:red !important;	
}
.my-bg-blue{
	background-color:#007bff !important;	
}
.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-3-29 21:9:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal อยากได้ effect ไหนเลือกได้จากเว็บ http://animista.net ได้เลย
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

</style>


<div class="simple-wrap">
    <div class="card-body">
        <div class="progress-bar" data-percent="100"></div>
    </div>
</div>    
<div class="simple-wrap">
    <div class="card-body">
        <div class="progress-bar" data-percent="50"></div>
    </div>
</div>   



<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	$(".simple-wrap .progress-bar").each(function(key, ele){
		var dataPercent = $(ele).data("percent");
		var cssClass = (dataPercent <= 50)?"my-bg-red":"my-bg-blue";
		$(ele).text(dataPercent+"%") // กำหนดตัวเลข
		.addClass(cssClass) // กำหนด class สีตามต้องการ
		.css({
			width:'0px' // กำหนดขนาดเริ่มต้น 
		}).animate({
			width:dataPercent+"%" // กำหนดการเปลี่ยนแปลงของ animation
		},1000,function(){ // กำหนดเวลาการ animated
			// ใส่ css class animation ถ้าต้องการ
			$(this).addClass("shake-horizontal"); 
			console.log("Done");	
		});
	});


});
</script>	

</body>
</html>

ตัวอย่าง DEMO

ninenik 29-03-2020
 ความคิดเห็นที่ 3
ผมเอาโค้ดมารัน ทำไมน้อยกว่า 50 มันยังเป็นสีฟ้าอยู่ครับ


พอมี demo เเบบถ้า 100%  ให้ในกรอบเเดง ให้ขยับหรือ มีสีติดๆดับๆ เเบบให้รู้ว่าตัวนี้ 100% เเล้ว
ผมไม่รู้ว่าเรียกว่าอะไร ขอบคุณครับ


Golff Sinlapachai 30-03-2020 12:45
 ความคิดเห็นที่ 4
เหมือนตัวอย่างด้านบนจะยังไม่สมบูรณ์ น่าจะต้องตรวจสอบ
การสิ้นสุดของการ animated เพิ่มเติมอีก แล้วค่อยเพิ่ม effect ดูตัวอย่างด้านล่างเพิ่มเติม

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>

<style type="text/css">
.my-bg-red{
	background-color:red !important;	
}
.my-bg-blue{
	background-color:#007bff !important;	
}
.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.blink-1 {
	-webkit-animation: blink-1 0.6s both;
	        animation: blink-1 0.6s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-3-30 13:6:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-3-29 21:9:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

</style>


<div class="simple-wrap">
    <div class="card-body">
        <div class="progress-bar" data-percent="100"></div>
    </div>
</div>    
<div class="simple-wrap">
    <div class="card-body">
        <div class="progress-bar" data-percent="50"></div>
    </div>
</div>   



<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	$(".simple-wrap .progress-bar").each(function(key, ele){
		var dataPercent = $(ele).data("percent");
		var cssClass = (dataPercent <= 50)?"my-bg-red":"my-bg-blue";
		$(ele).text(dataPercent+"%") // กำหนดตัวเลข
		.addClass(cssClass) // กำหนด class สีตามต้องการ
		.css({
			width:'0px' // กำหนดขนาดเริ่มต้น 
		}).animate({
			width:dataPercent+"%" // กำหนดการเปลี่ยนแปลงของ animation
		},1000,function(){ // กำหนดเวลาการ animated
			// ใส่ css class animation ถ้าต้องการ
			// กำหนดให้ตรวจสอบ เมื่อ สิ้นสุดการ เคลื่อนไหว
            $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
                        function(event) {
              console.log("Done");	
              $(this).addClass("blink-1"); 
              console.log($(this)[0].style.width);
            });          
			
		});
	});


});
</script>	

</body>
</html>

ตัวอย่าง DEMO

ninenik 30-03-2020
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ