WebAppers

/ best free open source web resources /

Shopify

A Collection of CSS Loaders / Loading Spinners

Posted · Category: MIT License, Tools

Single Element CSS Spinners is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of ‘loader’ and content text of ‘Loading…’. The text is for screen readers and can be used as a fallback state for older browsers.

The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning. Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.

css-spinners

Requirements: CSS Framework
Demo: http://projects.lukehaas.me/css-loaders/
License: MIT License

How to Create a Lovely Number Progress Bar

Posted · Category: MIT License, Upload

Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. Therefore Kalasoohave has created a lovely Number Progress Bar inspired by daimajia. It is light-weight, easy to use, customizable, free and open-source.

number-progress-bar

Requirements: JavaScript Framework
Demo: http://kalasoo.github.io/NumberProgressBar/
License: MIT License

Photopile JS – A Pile of Photos Scattered on Surface

Posted · Category: Gallery, MIT License

Photopile JS is a JavaScript/jQuery image gallery that simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile, (enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile. Thumbnails are draggable, enhancing the experience by allowing photos buried deep in the pile to be uncovered.

photopile-js

Requirements: JavaScript / jQuery Framework
Demo: http://photopile-js.com/
License: MIT License

Free Download: Charts and Diagrams Kit (PSD)

Posted · Category: CC License, Charts, MIT License

Both diagrams and charts are pictorial representations of information. Both are used to communicate visually, and both try to simplify the information they’re conveying. They’re also a great way to track trends and help explain complex datasets.

Have you ever encounter situations where you need to create a simple yet good-looking chart? That’s why we have created this Charts and Diagrams Kit, containing some of the most popular chart elements, which will help you design charts and graphs in Photoshop with ease. It includes bar chart, line chart, pie chart, timeline chart, circular chart, stats chart, map chart, slider and etc. Best of all, it’s free for download in PSD format.

charts-graphs-1

Read the rest of this entry »

Friendlier HTML Form Controls with CSS Magic

Posted · Category: Forms, MIT License

WTF, forms? provides friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

The file input is the most gnarly of the bunch. They wrap the <input> in a <label> so the custom control properly triggers the file browser. They use :after to generate a custom background and directive. It’s an entirely custom element, all generated via CSS.

custom-forms-inputs

Requirements: CSS
Demo: http://wtfforms.com/
License: MIT License

Logging Debug Messages with Debug JS Library

Posted · Category: Code, MIT License

Debug is a small library for logging debug messages. Since it is just a wrapper around console.log, it works in both Node and the Browser. It allows you to filter logging output without changing your source and it also outputs time differences which lets you easily tell how much time has elapsed between log messages.

debug

Requirements: JavaScript Framework
Demo: http://smalljs.org/logging/debug/
License: MIT License

Minimal Ghost Blogging Platform Goes Open Source

Posted · Category: Framework, MIT License

Ghost is a platform dedicated to publishing. It has a beautiful minimal design, is very customizeable and Open Source. Ghost allows you to write and publish your own blog, giving you the tools to make it easy and even fun to do.

Ghost application is free. Free to use, free to modify, free to share, free to redistribute. You can do anything you like with the software, without legal restriction. When you download a copy of Ghost, you own it. It’s completely yours.

ghost-blogging

Requirements: -
Demo: https://github.com/TryGhost/Ghost
License: MIT License

Simple, Flat and Free Web / Mobile UI Kit

Posted · Category: MIT License, PS Tutorials

Just another UI Kit is a simple, flat and free mobile / web UI kit avilable as a free PSD under MIT license. There are no restrictions for either personal or commercial use. Basically, you can do whatever you want with it.

just-another-ui-kit

Requirements: -
Demo: http://www.unity.hr/ui-kit/
License: MIT License

Velocity Animation Outperforms jQuery at All Level

Posted · Category: Framework, MIT License

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animations) while including several new features to improve animation workflow.

Velocity outperforms jQuery at all levels of stress, Transit beginning at medium levels of stress, and GSAP beginning at high levels of stress. At minimum, Velocity is always on par with other engines. In just 7Kb, Velocity includes all of $.animate()’s features while also packing in color animation, transforms, loops, easings, class animation, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

velocity-js

Requirements: jQuery framework
Demo: http://julian.com/research/velocity/
License: MIT License

At.js – AutoCompletion Library for Web Applications

Posted · Category: Chat, MIT License

At.js is an autocompletion library to autocomplete mentions, smileys etc. just like on Github or Twitter. It supports HTML5 contentEditable elements. You can listen to any character and not just ‘@’, set up multiple listeners for different characters with different behavior and data.

Listener events can be bound to multiple inputors. Keyboard controls are supported in addition to mouse. You can use custom data handlers and template renderers using a group of configurable callbacks.

at-js

Requirements: JavaScript frameworks
Demo: http://ichord.github.io/At.js/
License: MIT License

Page 8 of 63...«456789101112»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons