WebAppers

/ best free open source web resources /

Shopify

Beautiful Responsive Progress Bars with Animated SVG

Posted · Category: MIT License, Upload

ProgressBar.js is a beautiful and responsive progress bars with animated SVG paths. With ProgressBar.js, it’s easy to create arbitrary shaped progress bars. This library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor.

ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. You can change the color of progress bar smoothly with animation. You could also animate any property like stroke width, fill opacity, fill color etc.

progress-bar-js

Requirements: JavaScript Framework
Demo: http://kimmobrunfeldt.github.io/progressbar.js/
License: MIT License

Strip JS – A Less Intrusive Responsive Lightbox

Posted · Category: CC License, Popup

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience. Strip uses jQuery and supports all major browsers.

strip-jquery

Requirements: jQuery Framework
Demo: http://www.stripjs.com/
License: Creative Commons 3.0 License

ShareX – Screen Capture Has Never Been Easier

Posted · Category: Capture, GPL License

ShareX is an open source program that lets you take screenshots or screencasts of any selected area with a single key, save them in your clipboard, hard disk or instantly upload them to over 30 different file hosting services. In addition to taking screenshots, it can upload images, text files and all other different file types.

Upload files via Windows Explorer context menu or drag & drop. Upload clipboard content. You can also customizable after-capture-tasks such as annotating, adding effects, watermarking, uploading and other actions.

ShareX

Requirements: -
Demo: http://getsharex.com/
License: GPL 3.0 License

SweetAlert – A Beautiful Replacement for JavaScript Alert

Posted · Category: MIT License, Popup

Sweet Alert is a beautiful replacement for JavaScript Alert. SweetAlert automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s even highly customizeable. It is released under MIT License.

alert

Requirements: JavaScript Framework
Demo: http://tristanedwards.me/sweetalert/
License: MIT License

Converse.js – A Free & Open Source XMPP Chat Client

Posted · Category: Chat

Converse.js is a free and open source chat client that runs in your browser. It can be integrated into any website. Similar to Facebook chat but it also supports multi-user chatrooms.

Converse.js can connect to any accessible XMPP/Jabber server, either from a public provider such as jabber.org, or one you have set up yourself. It’s possible to enable single-site-login, whereby users already authenticated in your website will also automatically be logged in on the chat server.

converse-js

Requirements: JavaScript Framework
Demo: https://conversejs.org/
License: MPL License

Create Animated GIFs with GifShot JavaScript Library

Posted · Category: MIT License, Video

GifShot is a JavaScript library that can create animated GIFs from media streams, videos, or images. The client-side nature of the library makes it extremely portable and easy to integrate into almost any website.

Leverages cutting edge browser APIs including WebRTC, FileSystem, Video, Canvas, Web Workers, Typed Arrays, and Base 64 Encoding to support over 20 options. By harnessing the power of web workers, you get fast GIF creation that doesn’t block the UI. An image quantization algorithm is also used to reduce the number of colors required to represent the image.

gifshot

Requirements: JavaScript Framework
Demo: http://yahoo.github.io/gifshot/
License: MIT License

Midnight.js Lets You Switch Fixed Headers on the Fly

Posted · Category: Menu, MIT License

Midnight.js is a jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Midnight.js lets you switch fixed headers on the fly. On iOS <7 and older Android devices scrollTop isn't updated fluently, which creates a choppy effect. It can be fixed somewhat by wrapping the body in container and detecting touch events.

midnight-js

Requirements: jQuery Framework
Demo: http://aerolab.github.io/midnight.js/
License: MIT License

Create 360° Interactive Image Rotator with Rollerblade.js

Posted · Category: Gallery, License Free

With Rollerblade, you can easily give your webpage visitors a great 360° viewing experience with your products, images, or anything else you can think of. Rollerblade targets a container element with an image element inside that has the class of “rollerblade-img”. Make the src of the image the path to the first image in your rotator.

Rollerblade.js works on desktops, tablets, and smartphones (touch enabled). For all mobile devices, the rollerblade rotator will be activated when a user slides their finger from left to right. Image preloading is used to cache the images from your array to make sure the rotator performs as fast as possible. Rollerblade.js works well in IE9+.

rollerblade-js

Requirements: JavaScript Framework
Demo: http://www.iamapioneer.com/plugins/rollerblade/
License: License Free

Image Comparison Slider with CSS3 and jQuery

Posted · Category: Gallery, License Free

Image Comparison Slider is a handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. When you create a product page, there are some effective UX solutions that can be used to make the user ‘feel’ the product.

A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display resolution and a standard one. Google uses it to show how cool is a Google+ Photos filter.

image-comparison

Requirements: CSS3 and jQuery Framework
Demo: http://codyhouse.co/demo/image-comparison-slider/index.html
License: License Free

Create HTML Time Sheets with Timesheet.js

Posted · Category: Calendar, MIT License

Timesheet.js is a simple JavaScript library to create HTML time sheets. You can visualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript.

Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by mighty you.

timesheet-js

Requirements: JavaScript Framework
Demo: http://semu.github.io/timesheet.js/
License: MIT License

Page 1 of 65123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons