Share Code Thanh Tiến Trình Sử Dụng CSS3 Thuần Túy Cực Đẹp

LỜI MỞ ĐẦU

Tải hình ảnh động và thanh tiến trình thực sự quan trọng để thông báo cho người dùng về tiến trình của công việc, tôi đã tìm và nghiên cứu hiệu ứng này dựa trên JavaScript từ hai năm trước, và tôi phát hiện việc sử dùng JavaScript này ảnh hưởng đến tốc độ tải trang. Chính vì vậy, tôi đã quyết định chuyển sang CSS3!

Tìm đọc trên nhiều diễn đàn IT nước ngoài, và tôi chọn lọc ra bộ 2 thanh tiến trình sử dụng css thuần túy: không flash, không hình ảnh và không có JavaScript...

TIẾN TRÌNH 3D

Loading ...

Loading ...

Loading ...

Loading ...

HƯỚNG DẪN:

• Các bạn Copy toàn bộ code phía dưới rồi thêm vào chỗ cần hiển thị
• Tìm width: 69% để thay đổi giá trị % của tiến trình

<style>
.wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;

  /*  Change this to adjust the 3d bar tilting */
  transform: rotateZ(0.01turn) rotateY(0.01turn);
}
.progress
{
  height: 100%;
  width: 69%;
  padding: 0px;
  transition: width 2s ease;
  
  overflow: visible;
  text-align: center;
  color: #000;
  font-family: verdana;
  font-size: 20px;
  white-space: nowrap;
  line-height: 45px;
  
  border-right: solid 2px #444;
  background-size: 50px 50px;
  /* Blue stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  animation: bganim 1s linear 2s infinite;
}
@keyframes bganim {
  to { background-position: 50px;}
}
.cube {
  margin: auto;
  position: relative;
  height: 50px;
  width: 500px;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  border: solid 1px #eee;
  background-size: 50px 50px;
  /* Grey stripes */
  background-image: linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%, #ddd 50%, #ddd 75%,#eee 75%,#eee 100%);
  animation: bganim 1s linear 2s infinite;
}
.cube > .left,.cube > .right{
  height: 50px;
  width: 50px;
}

.front {
  transform: translateZ(25px);
}

.back {
  transform: translateZ(-25px) rotateX(180deg);
}

.top {
  transform: rotateX(-270deg) translateY(-25px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(25px);
  transform-origin: bottom center;
}

.left {
  transform: rotateY(270deg) translateX(-25px);
  transform-origin: center left;
}
.right {
  transform: rotateY(-270deg) translateX(25px) translateZ(450px);
  transform-origin: top right;
}

/* Rotating the 3d rectangle */
@keyframes rotate {
  100%{
    transform: rotateX(1turn);
  }
}
</style>
<div class="wrap">
  <div class="cube">
    <div class="front">
      <div class="progress">Loading ...</div>
    </div>
    <div class="back">
      <div class="progress">Loading ...</div>
    </div>
    <div class="top">
      <div class="progress">Loading ...</div>
    </div>
    <div class="bottom">
      <div class="progress">Loading ...</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

TIẾN TRÌNH THƯỜNG

HƯỚNG DẪN:

• Các bạn Copy toàn bộ code phía dưới rồi thêm vào chỗ cần hiển thị
• Tìm width: 69% để thay đổi giá trị % của tiến trình

<style>
#prbar {
    margin:5px;
    width:500px;
    background-color:#dddddd;
    overflow:hidden;
    
    /* Rounded Border */
    border: 1px solid #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
            
    /* Adding some shadow to the progress bar */
    -webkit-box-shadow: 0px 2px 4px #555555;
    -moz-box-shadow: 0px 2px 4px #555555;
    box-shadow: 0px 2px 4px #555555;            
}
        
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
  border-radius:0px;
}
        
#prpos {
    width:69%;
    height:30px;
    background-color:#3399ff;
    border-right:1px solid #bbbbbb;
           
    /* CSS3 Progress Bar Transitions */
    transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
   
    /* CSS3 Stripes */
    background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
    background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-size: 40px 40px;

    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}
        
@keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-ms-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
</style>
<div id="prbar">
  <div id="prpos">
  </div>
</div>

Các bạn tùy ý đặt lại kích thước cho phù hợp với blog/website

LỜI KẾT

Trên đây là toàn bộ Code thanh tiến trình sử dụng CSS3 thuần túy! Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho tôi biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!

Copyright © Lê Anh Đức

2 Share Share Send by Email Copy URL