Thanh tiến trình là một đại diện thú vị và đóng một vai trò quan trọng trong UX. Chúng tôi giải thích cách bạn có thể tạo một thanh tiến trình bắt mắt trông giống nhau trên tất cả các trình duyệt.

Bạn đang xem : thanh tiến trình động html

Phần tử tiến trình biểu thị tiến độ hoàn thành của một nhiệm vụ. Phần tử tiến trình phải có cả thẻ bắt đầu (tức là & lt; tiến trình & gt;) và thẻ kết thúc (tức là & lt; / tiến trình & gt;).

Các thuộc tính:

Nó có thể có hai thuộc tính:

  • max – Cho biết lượng công việc cần phải hoàn thành trước khi nó có thể được coi là hoàn thành. Nếu không được chỉ định, giá trị mặc định là 1,0.
  • value – Cho biết trạng thái hiện tại của thanh tiến trình. Nó phải lớn hơn hoặc bằng 0,0 và nhỏ hơn hoặc bằng 1,0 hoặc giá trị của thuộc tính max (nếu có).

Thanh tiến trình có thể trông khác trong các trình duyệt khác nhau. Không áp dụng bất kỳ CSS nào, thanh tiến trình trông giống như thế này trong Chrome, Firefox và phiên bản Internet explorer mới nhất.

Ví dụ:
  & amp; lt; process max = "100" value = "80" & gt; & amp; lt; / process & gt;  
1. Chrome

Thanh tiến trình của Chrome

2. Firefox

Thanh tiến trình của Firefox

3. Internet Explorer 11 và Microsoft Edge

Thanh tiến trình IE

Bạn nên lưu ý rằng chỉ thêm thuộc tính max không thay đổi trạng thái của thanh tiến trình vì trình duyệt vẫn không biết giá trị nào cần đại diện.

Đây là tất cả những gì chúng ta có thể làm trong HTML vì CSS thực hiện phần còn lại. Ở giai đoạn này, đừng lo lắng về các kỹ thuật dự phòng để hỗ trợ các trình duyệt cũ hơn không hiểu yếu tố tiến trình.

CSS cho phần tử thanh tiến trình

1.WebKit / Blink (Chrome / Safari / Opera)

Để đặt lại các kiểu mặc định, chúng tôi chỉ cần đặt -webkit-ngoại hình thành không có

CSS:

  tiến trình [value] {
  chiều rộng: 300px;
  chiều cao: 14px;
  margin: tự động 50px;
  hiển thị: khối;
  /* Thứ quan trọng */
  -webkit-ngoại hình: không có;
  ngoại hình: không có;
  biên giới: không có;
}  

WebKit / Blink cung cấp hai lớp giả để tạo kiểu cho phần tử tiến trình:

  • -webkit-process-bar:

Nó là lớp giả có thể được sử dụng để tạo kiểu cho vùng chứa phần tử tiến trình. Trong ví dụ này, chúng tôi sẽ thay đổi màu nền, bán kính đường viền và bóng hộp thành vùng chứa phần tử tiến trình.

  • -webkit -progress-value:

Đây là lớp giả để tạo kiểu cho giá trị của thanh tiến trình. Màu nền mặc định là màu xanh lục có thể được xác minh bằng cách kiểm tra biểu định kiểu tác nhân người dùng. Đối với ví dụ này, chúng tôi sẽ tạo hiệu ứng mẫu sọc bằng cách sử dụng gradient tuyến tính trên thuộc tính hình ảnh nền.

CSS:

  / * Bây giờ hãy tạo kiểu cho nền * /

tiến trình [giá trị] :: - webkit-tiến trình-thanh {
  màu nền: nhạt;
  bán kính đường viền: 50px;
  box-shadow: 0 1px 0px 0 rgba (255, 255, 255, 0,2);
}  

Thanh tiến trình

Tiếp theo, chúng tôi sẽ tạo kiểu cho -webkit-process-value (thanh) với nhiều nền gradient. Một để tạo dải, một để tạo bóng từ trên xuống dưới và một để biến đổi màu sắc từ trái sang phải.

Xem Thêm  cin trong C ++ - c ++ cin một chuỗi

CSS:

  process [value] :: - webkit-process-value {
  bán kính đường viền: 50px;
  box-shadow: inset 0 1px 1px 0 rgba (255, 255, 255, 0,5);
  background-image: -webkit-linear-gradient (45deg, trong suốt, trong suốt 33%, rgba (0, 0, 0, 0,1) 33%, rgba (0, 0, 0, 0,1) 66%, trong suốt 66%), -webkit-linear-gradient (top, rgba (255, 255, 255, .5), rgba (0, 0, 0, .3)), -webkit-linear-gradient (left, # 673ab7, # 6518ef);
  / * với mẫu sọc * /
  background-size: 25px 14px, 100% 100%, 100% 100%;
}  

Progress-bar-with stripe-pattern

2. Firefox

Firefox sử dụng -moz-export: none; để tạo kiểu cho phần tử tiến trình.

Firefox cung cấp một thanh tiến trình lớp giả duy nhất. Chúng tôi có thể sử dụng để nhắm mục tiêu giá trị thanh tiến trình. Điều này có nghĩa là chúng tôi không thể tạo kiểu nền cho vùng chứa trong Firefox.

CSS dành cho firefox:

  tiến trình [value] {
  chiều rộng: 300px;
  chiều cao: 14px;
  margin: tự động 50px;
  hiển thị: khối;
  /* Thứ quan trọng */
  -webkit-ngoại hình: không có;
  -moz-ngoại hình: không có;
  ngoại hình: không có;
  biên giới: không có;
}

/ * phần giá trị * /

tiến trình [giá trị] :: - moz-tiến trình-thanh {
  bán kính đường viền: 50px;
  box-shadow: inset 0 1px 1px 0 rgba (255, 255, 255, 0,5);
  background-image: -webkit-linear-gradient (45deg, trong suốt, trong suốt 33%, rgba (0, 0, 0, 0,1) 33%, rgba (0, 0, 0, 0,1) 66%, trong suốt 66%), -webkit-linear-gradient (top, rgba (255, 255, 255, .5), rgba (0, 0, 0, .3)), -webkit-linear-gradient (left, # 673ab7, # 6518ef);
  / * với mẫu sọc * /
  background-size: 25px 14px, 100% 100%, 100% 100%;
}  

mà không sử dụng thẻ tiến trình:

Tôi thích loại mã này vì thanh tiến trình chạy tốt trong tất cả các trình duyệt. Màu thanh tiến trình là màu xanh lam trong tất cả các phiên bản của Internet Explorer.

Sau đây, tôi cung cấp cho bạn một ví dụ đơn giản về cách tạo hoạt ảnh cho thanh tiến trình.

HTML:

  & amp; lt; div class = "process-bar" & gt; & amp; lt; span class = "process-value" style = "width: 55%;" & gt; & amp; lt; / span & gt; & amp; lt; / div & gt; & amp; lt; span & gt; & amp; lt; strong & gt; JAVASCRIPT & amp; lt; / strong & gt; & amp; lt; / span & gt; & amp; lt; br / & gt;
& amp; lt; div class = "process-bar" & gt; & amp; lt; span class = "process-value yellow" style = "width: 70%;" & gt; & amp; lt; / span & gt; & amp; lt; / div & gt; & amp; lt; span & gt; & amp; lt; strong & gt; HTML & amp; lt; / strong & gt; & amp; lt; / span & gt; & amp; lt; br / & gt;
& amp; lt; div class = "process-bar" & gt; & amp; lt; span class = "process-value green" style = "width: 90%;" & gt; & amp; lt; / span & gt; & amp; lt; / div & gt; & amp; lt; span & gt; & amp; lt; strong & gt; CSS & amp; lt; / strong & gt; & amp; lt; / span & gt; & amp; lt; br / & gt;  

CSS:

  .progress-bar {
  màu nền: nhạt;
  bán kính biên giới: 1,25em;
  chiều rộng: 300px;
  chiều cao: 16px;
  display: inline-block;
}

.progress-value {
  màu nền: # 673ab7;
  chuyển tiếp: 0,3 giây tất cả tuyến tính;
  bán kính biên giới: 1,25em;
  chiều cao: 16px;
  display: inline-block;
}  

Thêm hoạt ảnh:

Ở đây, tôi đã thêm hoạt ảnh vào thanh tiến trình và sử dụng hoạt ảnh này trên chính công cụ chọn giá trị tiến trình.

Xem Thêm  Lặp lại mảng JavaScript - js lặp qua mảng

CSS:

  @keyframes process {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 55%;
  }
}

@ -webkit-keyframes tiến trình {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 55%;
  }
}

@keyframes process-2 {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 70%;
  }
}

@ -webkit-keyframes process-2 {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 70%;
  }
}

@keyframes process-3 {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 90%;
  }
}

@ -webkit-keyframes process-3 {
  từ {
    chiều rộng: 0;
  }
  đến {
    chiều rộng: 90%;
  }
}  
  / * animation * /

.progress-value {
  màu nền: # 673ab7;
  chuyển tiếp: 0,3 giây tất cả tuyến tính;
  bán kính biên giới: 1,25em;
  chiều cao: 16px;
  display: inline-block;
  hoạt hình: tiến độ 3 giây dễ dàng-vào-ra chuyển tiếp;
  -webkit-animation: tiến độ chuyển tiếp dễ dàng trong 3 giây;
}

.progress-value.green {
  màu nền: # 4CAF50;
  hoạt ảnh: tiến độ-3 3s chuyển tiếp dễ dàng vào-ra;
  -webkit-animation: tiến-độ-3 3 giây chuyển tiếp dễ dàng;
}

.progress-value.yellow {
  màu nền: # ff9800;
  hoạt hình: tiến độ-2 3 giây chuyển tiếp dễ dàng;
  -webkit-animation: tiến-độ-2 3 giây dễ-vào-ra-trước;
}  

Bạn có thể kiểm tra tại đây để biết kết quả của mã trên.

Thanh tiến trình có nhãn:

Sau đây, tôi cung cấp cho bạn một ví dụ khác về cách tạo hoạt ảnh thanh tiến trình với nhãn. Trong ví dụ dưới đây, tôi đang sử dụng một số mã javascript để thay đổi động giá trị phần trăm.

HTML:
  & amp; lt; div class = "process-bar" & gt;
  & amp; lt; div id = "bar" class = "process-value" style = "width: 1%;" & gt; & amp; lt; span id = "value" & gt; 1% & amp; lt; / span & gt; & amp; lt; / div & gt;
& amp; lt; / div & gt;  
CSS:
 .progress-bar {
  màu nền: nhạt;
  bán kính biên giới: 1,25em;
  chiều rộng: 300px;
  chiều cao: 16px;
  display: inline-block;
}

.progress-value {
  màu: #fff;
  text-align: center;
  màu nền: # 673ab7;
  chuyển tiếp: .3s tất cả các tuyến tính;
  bán kính biên giới: 1,25em;
  chiều cao: 16px;
  display: inline-block;
}  

Nếu bạn muốn cập nhật động văn bản bên trong nhãn thành cùng một giá trị của chiều rộng của thanh tiến trình, hãy thêm thông tin sau:

Javascript:
  var elem = document.getElementById ("bar");
var width = 1;
var id = setInterval (frame, 100);

khung hàm () {
  nếu (chiều rộng & gt; = 100) {
    clearInterval (id);
  } khác {
    chiều rộng ++;
    elem.style.width = width + '%';
    document.getElementById ("value"). innerHTML = width + '%';
  }
}  

Bạn có thể kiểm tra tại đây để biết kết quả của ví dụ trên.

Ở đây tôi giải thích thanh tiến trình cơ bản sử dụng CSS, HTML và javascript và bạn có thể xem một ví dụ khác về thanh tiến trình hoạt ảnh (hình tròn nước lấp đầy hoạt ảnh đang tải.)


Xem thêm những thông tin liên quan đến chủ đề html thanh tiến trình động

Arrow Swipe Game with HTML, CSS and JavaScript (Part 3 – Progress Bar Countdown Timer)

alt

  • Tác giả: Coding Journey
  • Ngày đăng: 2018-12-15
  • Đánh giá: 4 ⭐ ( 1964 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to build an Arrow Swipe Game, with touchscreen support, using HTML, CSS and JavaScript!

    Part 1 – Setting the Foundation: Basic HTML, CSS and JavaSript, Font Awesome Icons, Multi-device Swipe with JavaScript using Mouse Events (mousedown, mouseup) for traditional or non-touch screens and Touch Events (touchstart, touchend) for touch screens.

    Part 2 – Animations: Animate.css Library, CSS Animations, Add/Remove CSS Animation Classes with JavaScript.

    Part 3 – Progress Bar Countdown Timer: HTML and CSS for static Progress Bar, JavaScript (setInterval/clearInterval) for Dynamic (animated) Progress Bar.

    Part 4 – Restart Game: HTML, CSS and JavaScript to create a Restart Game Button with the corresponding Functionality.

    Code for this Project: https://codepen.io/Coding_Journey/full/pQvKOj/

    Support the Channel 💙☕🙏
    PayPal: https://paypal.me/CodingJourney

    Affiliate Links*
    Bluehost Web Hosting: https://www.bluehost.com/track/codingjourney/

    *By making a purchase through any of my affiliate links, I’ll receive a small commission at no additional cost to you. This helps support the channel and allows me to continue creating videos like this. Thank you for your support!

    Suggested Videos:
    Arrow Swipe Game with HTML, CSS and JavaScript Playlist: https://www.youtube.com/watch?v=SogoaFv2CRQ&list=PLdGqEpyfYoMAYRa97MgWMlfJlbSJbxZXp
    Font Awesome 5 Icons: https://www.youtube.com/watch?v=rXiO4bm2Zpc
    Animations with Animate.css: https://www.youtube.com/watch?v=FYtCTt7sKwY

    Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!

    Codepen: https://codepen.io/Coding_Journey/
    Twitter: https://twitter.com/CodingJrney
    Email: codingjourney123@gmail.com

    Subscribe 💖
    https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1

Thanh tiến trình (Progress Bars) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 5 ⭐ ( 9440 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ học cách sử dụng thanh tiến trình trong Bootstrap 4 nhé các bạn !

Progress Bar trong Bootstrap 4

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 3370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Progress Bar trong Bootstrap (hay còn gọi là thanh tiến trình) là một thanh được sử dụng để hiển thị cho người dùng xem họ đã đi được bao xa

Tạo thanh tiến trình bằng Ngx-Bootstrap trong Angular 8

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 1192 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo thanh tiến trình bằng ngx-bootstrap trong Angular 8. Ngx-Bootstrap đã phát hành một gói công cụ mã nguồn mở là các chỉ thị…

Tạo thanh tiến trình PROGRESS

  • Tác giả: nentang.vn
  • Đánh giá: 3 ⭐ ( 2660 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo thanh tiến trình PROGRESS.Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, Học web, học web cần thơ, đồ án mẫu, bài tập thực hành web…

Chủ động kiểm tra yếu tố hình thành giá khi hàng hóa có biến động bất thường

  • Tác giả: bnews.vn
  • Đánh giá: 5 ⭐ ( 7084 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Văn phòng Chính phủ ra Thông báo số 179/TB-VPCP ngày 22/6/2022 kết luận của Phó Thủ tướng Lê Minh Khái – Trưởng Ban Chỉ đạo điều hành giá tại cuộc họp ngày 13/6 về điều hành giá một số nhóm mặt hàng.

Bootstrap: Thanh tiến trình (Progress bars)

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 5722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thanh tiến trình (Progress bars)

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Đếm số nguyên tố có trong mảng một chiều các số nguyên bằng C / C++ - bài tập vòng lặp while trong pascal

By ads_php