Đã dùng gần đây

    Mở một công cụ và nó sẽ xuất hiện ở đây.

    Tạo thanh tiến trình

    Thiết kế thanh tiến trình có hiệu ứng động

    Chia sẻ công cụ này

    Báo cáo sự cố

    Hãy mô tả sự cố mà không kèm dữ liệu nhập hoặc tệp riêng tư.

    Công cụ này hữu ích đến mức nào?

    Công cụ này hữu ích đến mức nào?

    Thiết kế thanh tiến trình của bạn

    Chọn một hình dạng và chủ đề, rồi tinh chỉnh các chi tiết.

    Chủ đề nhanh
    Thêm cài đặt
    Kích thước và hình dạng
    Màu sắc và màu chuyển
    Cài đặt viền
    Nhãn
    Hoạt ảnh và hiệu ứng

    Xem trước và mã

    Nền xem trước

    Bản xem trước vừa với khung này. Kích thước xuất và mã vẫn giữ theo kích thước bạn đã chọn.

    Đã cập nhật bản xem trước. Hãy sao chép cả HTML và CSS cho dự án của bạn.

    Bản xem trước xuất PNG

    PNG là bản kết xuất tĩnh trên nền trắng. Nó dùng kiểu canvas gốc: màu chuyển và viền chỉ áp dụng cho thanh tuyến tính; hiệu ứng phát sáng CSS, sọc, nhịp đập và chuyển tiếp có trong bản xem trước trực tiếp và trong mã.

    Mã HTML
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Đang tải... 65%
  </div>
</div>
    Kiểu CSS
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML và CSS đi cùng nhau. Chúng mô tả giá trị cố định này; hãy tự kết nối việc cập nhật tiến độ và ngữ nghĩa trợ năng trong ứng dụng của bạn.

    Mẹo nhanh
    • Tuyến tính: chỉ báo tải và tải tệp lên.
    • Hình tròn: đồng hồ đo và biểu diễn kỹ năng.
    • Nửa hình tròn: chỉ số trên bảng điều khiển và mức sử dụng hạn mức.
    • Dọc: chỉ báo pin và dung lượng lưu trữ.
    • Chấm: phân trang và tiến độ qua một chuỗi.
    • Theo bước: các mốc trong quy trình nhiều bước.

    Giới thiệu công cụ tạo thanh tiến trình, trình tạo thanh tiến trình CSS miễn phí

    Thiết kế thanh tiến trình đẹp mắt, có hoạt ảnh, với màu sắc, nhãn và hiệu ứng tùy chỉnh được. Sao chép HTML và CSS cùng nhau, hoặc xuất ảnh PNG tĩnh theo kích thước đã chọn. Có sáu hình dạng, sáu chủ đề và ba đường cong chuyển động. Ảnh PNG dùng trình kết xuất canvas riêng: gradient và viền chỉ áp dụng cho thanh tuyến tính, còn hoạt ảnh CSS, sọc và hiệu ứng phát sáng không được đưa vào. Hãy kiểm tra kết quả trong bố cục thực tế của bạn trước khi tích hợp trình tạo thanh tiến trình trực tuyến này.

    Chỉ báo tiến trình là một mẫu giao diện cốt lõi trong thiết kế web và ứng dụng di động hiện đại. Chúng cho người dùng biết trạng thái tải, mức hoàn thành nhiệm vụ, trình độ kỹ năng và tiến độ đạt mục tiêu. Thay vì tự viết CSS từ đầu, hãy dùng trình chỉnh sửa trực quan của chúng tôi để cấu hình từng chi tiết: màu sắc, bo góc, sọc, gradient và nhãn, rồi sao chép mã được tạo thẳng vào dự án.

    Công cụ có bản xem trước trực tiếp theo thời gian thực cùng bản xem trước ảnh xuất từ canvas, để bạn thấy chính xác thanh tiến trình sẽ trông thế nào trước khi chốt. Dù bạn đang làm đồng hồ đo cho bảng điều khiển, chỉ báo tải tệp, trình hướng dẫn nhiều bước hay thanh phân trang dạng chấm, công cụ tạo thanh tiến trình đều có kiểu phù hợp và mã sạch tương ứng.

    Thiết kế

    Mới thêm gần đây

    Tất cả công cụ

    Cài đặt quyền riêng tư

    Chọn tùy chọn của bạn cho phân tích, quảng cáo và cá nhân hóa. Bộ nhớ thiết yếu giúp các tính năng như giao diện và công cụ đã lưu tiếp tục hoạt động.

    Bộ nhớ thiết yếu luôn được bật.