Miễn phí sở hữu 22 Progress Bar Plugin cho website

Thứ hai - 13/04/2015 09:43

Trong bài dưới đây bạn sẽ tìm thấy JavaScript và jQuery code, những thứ mà sẽ giúp cho website của bạn thể hiện quá trình của việc download hay upload hoặc bất kỳ quá trình nào trên website.

Miễn phí sở hữu 22 Progress Bar Plugin cho website

jQuery giúp bạn tạo ra các thành phần quan trọng của một thiết kế web, chẳng hạn như progress bar (thanh quá trình), drop down list...một cách dễ dàng. Trong bài dưới đây bạn sẽ tìm thấy JavaScript và jQuery code, những thứ mà sẽ giúp cho website của bạn thể hiện quá trình của việc  download hay upload hoặc bất kỳ quá trình nào trên website. Tất cả những script mà chúng tôi cung cấp dưới đây hoàn toàn miễn phí cho bạn download.

jQuery và JavaScript  có thể không hỗ trợ các trình duyệt web cũ nhưng với những trình duyệt hiện đại thì chúng sẽ phát huy lợi thế tối đa. Còn bây giờ, hãy cùng chúng tôi đến với 22 Progress Bar Plugin cho thiet ke web của bạn. 

Checkout Progress Bar

Đây là một responsive css progress bar với phần thể hiện quả trình đẹp mắt qua 5 dấu mốc, từ login đến cuối cùng là hoàn thành. 

checkout progress bar

Pixel Progress Bar

Dòng quá trình có các hình khối vuông chuyển động trong thanh dài, trông khá sáng tạo và bắt mắt. 

pixel bar

 

Buttons With Built-in Progress Meters

Sẽ thật hoàn hảo nếu thanh quá trình chạy trong khi bạn vẫn có thể điền vào form submit. 

css progress

Animated Goal Progress Bar jQuery plugin

Với plugin này, bạn sẽ có thể tạo ra một progress bar động nhờ jQuery. Chỉ cần điền vào input được yêu cầu và plugin sẽ tính toán quá trình cũng như tạo chuyển động cho thanh quá trình.

goal progress bar

 

Free progress button styles

Một bộ các nút quá trình theo phong cách phẳng và 3D. Bản thân các nút bấm đó cũng là cột đo quá trình một cách hiệu quả và sáng tạo.

progress button styles

ProgressJs – Themeable progress bar library

ProgressJs là một thư viện JavaScript và CSS3, nó sẽ giúp ích đắc lực cho các lập trình viên trong việc tạo và quản lý progress bar đối với mọi vật thể trên thiết kế website chuyên nghiệp của mình. 

progress-js

ngProgress – Youtube Style Bar

ngProgress giúp thể hiện rõ nét tình trạng load của bất kỳ thứ gì. Nó đủ sức thể hiện những quá trình load hoặc tải, hoặc upload dài hơi hơn bình thường hoặc làm việc tốt với những quá trình load đơn giản giữa các trang. 

ngprogress

Pure CSS Progress Bar

Progress Bar sử dụng CSS 3 gradient, bóng đổ, và phần viền đệm cùng một chút chuyển động linh hoạt. Nhờ sử dụng CSS3 nên thanh quá trình này sẽ hoạt động tốt trên mọi trình duyện phổ biến hiện nay. 

pure css bar

 

NProgress – Slim Progress bar

Bạn đang chứng kiến một progress bar có kích thước nano siêu nhỏ nhưng lại vô cùng hiệu quả nếu bạn đặt nó đúng chỗ trên trang web, một thanh trạng thái đặt bàn trong một thiết kế web nhà hàng là ý tưởng không hề tồi.

nprogress

Circular Progress

Đây là một JavaScript progress widget hình tròn trông khá đơn giản nhưng hiệu quả. 

circualar progress

 

Nanobar.js

Progress bar có kích thước rất nhẹ (~730 bytes). Bạn cũng chẳng cần dùng đến jQuery.

nanobar

Angular-loading-bar

Ý tưởng ở đây khá đơn giản, bạn có thể quan sát được quá trình của nhiều nhiệm vụ được thực hiện trong cùng một khoảng thời gian với thanh quá trình kiểu này. 

angular loading bar

 

Free jQuery Percentage Loader

Với plugin, bạn sẽ được sở hữu thiết kế thanh quá trình đơn giản và linh hoạt. Người ta tận dụng ưu thế HTML 5  để mang lại diện mạo bắt mắt và hoạt động mượt mà cho thanh quá trình này. Bạn có thể điều chỉnh kích thước của progress bar dưới đây theo ý muốn. 

percentage jQuery loader

Free Circular Progress Bar – jQuery plugin

Thanh progress bar hiển thị theo hình vòng tròn với những ô chức năng ở bên cạnh để quản lý quá trình download hoặc upload.

Circular Progress Bar - jQuery plugin

Simple Free jQuery CSS3 Progress Bar

Progress bar này sử dụng công nghệ HTML5. Thiết kế của nó khá mượt mà và đơn giản

Super Simple Progress Bar

CSS 5 steps progress bar

Progress bar chỉ sử dụng CSS để tạo ra quá trình gồm 5 bước.  in 5 steps.

CSS 5 steps progress bar

jQuery Progress bar profile completion

Sử dụng các yếu tố quá trình để tạo ra thanh trạng thái của việc điền vào profile. Khi muốn điền thông tin vào mục nào, bạn chỉ cần click vào vị trí của bước đó trên thanh, sau đó ấn save hoặc next để đến với nội dung tiếp theo.  

jQuery Progress bar profile completion

jQuery Image Preloader Progress Bar

Progress bar với màu sắc có thể thay đổi được theo từng tỷ lệ load trang.

Image Preloader Progress Bar

jQuery Form Progress Bar

Progress bar có thiết kế rất đơn giản và tinh tế.

Form Progress Bar

Free YouTube Progress Bar

Thanh progress bar chỉ có thể hiển thị ở trong một lượt duyệt web.  Đó có thể là một dạng A/B test.

youtube

 

Flat Pie Charts and Progress Bars Templates ( Cost : $6)

Bảng biểu hình tròn chính là thanh progress bars với các chi tiết miêu tả và phần giá trị minh họa. Bạn có thể dùng nó cho các dịch vụ thiết kế web dạng infographic của bạn. Bạn sẽ dễ dàng tùy chỉnh font, màu sắc và các giá trị hiển thị. Các file chỉnh sửa được với Adobe Edge CC.

premium loading bars

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Solutions