Tất cả bài viết | Bootstrap

Cách tạo thanh tiến trình bằng Bootstrap với hiệu ứng CSS3 Gradient & Animate

Trong bài thực hành hướng dẫn thiết kế web bằng Bootstrap này các Bạn sẽ được chỉ cách cách tạo thanh tiến trình bằng Bootstrap kết hợp với hiệu ứng CSS3 Gradient & CSS3 Animate

Bước 1: Tạo cấu trúc HTML

 
  
   
   Cách tạo thanh tiến trình bằng Bootstrap 
    
với hiệu ứng CSS3 Gradient & Animate
    
  
   
    
    HTML5 
     
      100%  
    
    CSS3 
     
      85%  
    
    JavaScript 
     
      60%  
     
    RWD 
     
      80%  
     
    JQUERY 
     
      90%  
     
    BOOTSTRAP 
     
      95%  
     
    
   
 
 
  Copyright © 2016 - hocwebgiare.com

Bước 2: Định dạng CSS

.progress{    
height:15px;    
border-radius: 0;    
box-shadow: none;    
line-height: 35px;    
overflow: visible;    
background:#d6d6d6;
}
.progressbar-title{    
color:#333;    
font-size:15px;    
margin:5px 0 5px;
}
.progress .progress-bar{    
position: relative;    
animation: animate-positive 2s;
}
.progress .progress-bar span{    
position: absolute;    
top: -25px;    
right: 27px;    
color: #555;    
display: block;    
font-size: 17px;    
font-weight: bold;
}
@-webkit-keyframes animate-positive {    
0% { width: 0%;}
}
@keyframes animate-positive {    
0% { width:0%; }
}

Bước 3: Gọi thư viện Bootstrap

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất