119 Repositories
JavaScript loading-animations Libraries
Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.
Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation
This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.
Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.
Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @
A tool to unpack, repack, edit and play 2d animations from Supercell games
SC Tools This module is intended to unpack, edit and repack .sc files from Supercell games. SC files are unpacked to disk as projects. Projects contai
The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.
Awesome Estate The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.
𝔉𝔫𝔬𝔫 Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J
Finally, a simple, lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* using the IntersectionObserver API
Simply Lazy A simple & lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* utilizing the built in IntersectionObserver API i
Bootstrap 5 spinner/loading/pending indicator for input, textarea and select
@tkrotoff/bootstrap-input-spinner Bootstrap 5 spinner/loading/pending indicator for input, textarea and select Example: https://codesandbox.io/s
Small example showing how you can make game sprite animations using CSS with Javascript movement.
Hi there, I'm Björn Hjorth 👋 I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twit
A small library for creating typing animations.
A small library for creating typing animations. View a short video demonstration here. Installation npm i tiper-js Usage Initialization is really simp
Lightweight JavaScript library that allows you add motion blur to your CSS animations
MotionBlurJS For more information and examples please visit: https://www.motionblurjs.com What is MotionBlurJS MotionBlurJS is a lightweight JavaScrip
Customisable javascript skeleton loader.
JS Skeleton loader Simple but very powerful loader package built with full javascript. Installation To install this package, include index.js file int
A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.
Mantine DataTable A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagina
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.
Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation
A JavaScript library for optimizing html pages with video content that prevents videos from loading on mobile devices.
📱 js-vido — JavaScript Video Download Optimizer A JavaScript library for optimizing html pages with video content that prevents videos from loading o
Efeito de ripples baseado no Material Design.
Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery Esse efeito utiliza seletores do jQuery e manipulação do DOM para obte
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
Wave.js Audio visualizer library for javascript. Installation Install With CDN script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.
Full featured JavaScript image & video gallery. No dependencies
lightgallery.js Full featured JavaScript lightbox gallery. No dependencies. Important notice lightgallery.js has been merged with lightGallery. That m
A progressive image loading library. Inspired by Medium’s similar technique.
Blurry Image Load Synopsis A lightweight, zero-dependency library that loads images on demand. Until the images are loaded, a very small version of ea
A wrapper around IPFS for speeding up the loading of web3 frontend applications.
ipfs-wrapper A wrapper around ipfs-core for speeding up the loading of web3 frontend applications. Used on Blogchain. Requirements NodeJS v14.5.0 or h
Um jogo da memória tematizado com One Piece.
Getting Started - Jogo da Memória Eis um joguinho da memória . Também foi o primeiro projeto meio complicadinho que consegui resolver por conta própri
A slick loader to use during your AJAX calls or data processing
Slick Loader A slick loader to use during your AJAX calls or data processing Doc Installation Simply import slick-loader into your HTML. link rel="st
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
A tiny JavaScript library to enable CSS animations when user scrolls.
A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe
Simple and flexible, css only, content placeholder loading animation.
Placeholder loading Simple and flexible, css only, content placeholder loading animation. Demo https://zalog.github.io/placeholder-loading/ Take a loo
A small jQuery plugin for rendering scroll-based HTML animations
Storyline Build beautiful landing pages that change as the user scrolls up or down. Project created in 2013 and ported to GitHub in 2021. Demo Just vi
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4
CSS-based animations triggered by JS, defined in your stylesheet
Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
A timed continuous carousel that uses vanilla JavaScript & CSS animations.
Continuous Carousel ∞ Timed continuous carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. Mar
Simple scroll based text reveal animation library.
Simple scroll based text reveal animation library. ⛰️ DEMO Getting Started Using packge manager NPM Install textify using npm: npm install textify.js
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.
loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig
BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only
BttrLazyLoading.js BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not onl
A modern lazy loading library for images.
Layzr.js A modern lazy loading library for images. Demo Page Getting Started Follow these steps: Install Setup Images Instantiate Review Options Revie
A jQuery plugin that lets you attach callbacks to useful image loading events.
waitForImages Copyright (c) 2011-2018 Alexander Dickson @alexdickson Licensed under the MIT licenses. http://alexanderdickson.com Donate! Overview Pro
The progressive image loading library for great good!
AntiModerate The progressive image loading library for great good! Reduce loading time of page to less than a second on slow connections by loading an
:loop: Create loopy loading animations
Sonic.js See some examples! Create your own with Sonic Creator! Sonic is a tool that you can use to create spinny-loady-thingies on the fly. It's best
Delightful, performance-focused pure css loading animations.
Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti
CSS classes to move your DOM!
CSShake Some CSS classes to move your DOM! Live Demo Download Center You could download the complete csshake.css file or separated files for each shak
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
Transform your icons with trendy animations.
iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation
Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨
solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.
customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!
Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.
Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API Options • Browser compatibility • Limitations About Assuming you would like to record p5.js animations
Dynamically-loading WebComponent Assembly UI Framework
Golgi: Dynamically-loading WebComponent Assembly Framework Rob Tweed [email protected] 14 February 2022, M/Gateway Developments Ltd http://www.mgate
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).
spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo
A simple way of loading inline es-modules on modern browser.
ES inline module A simple way of loading inline es-modules on modern browser. Usage Use inlineImport to dynamically import inline scripts. script typ
🛰 Shared component across routes with animations
Shared Vue component across routes with animations Live Demo Why? It's quite common you might have a same component used in different routes (pages) w
Animation Academy teaches you CSS animations using the transition and animation properties.
Animation Academy Open Animation Academy Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou
Animated FlatList component that supports entering, exiting and reordering animations.
react-native-flatlist-animated Animated FlatList component that supports entering, exiting and reordering animations. Installation npm i react-native-
Demo showing how to lazy load a component in Angular without routing!
WidgetDashboard This project was generated with Angular CLI version 13.2.6. Development server Run ng serve for a dev server. Navigate to http://local
Super Cat Meow Squad! 🐱
This page dynamically displays the 6 members of the SCMS and contains some interactions with other users interested in them, like commenting on them or a like counter for each kitten.
An animation library, built on the Web Animations API for the smallest filesize and the fastest performance
motion-signals A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Lightweight Loading Animation
◼️ Features: 🛠 Easy to Use 🌠 Fast & Lightweight (0.5Kb) 💪 No dependencies, built with VanillaJS 🌎 Tested in all modern browsers ◼️ Demo: https://b
Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.
Veroo Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations. Pleasant, fluid and lively
A React-fullstack platform to track all cryptocurrency in one place.
A React-fullstack platform to track all cryptocurrency in one place. Create your account and add your favorite coins.
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers
PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati
A powerful little tool for managing CSS animations
NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.
CSS animations engine
Animatic With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects!
Making Animation Simple
Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
Fallback JS - JavaScript library for dynamically loading CSS and JS files
Fallback JS - JavaScript library for dynamically loading CSS and JS files. Also provides the ability to load multiple files from a CDN with multiple fallback options and shimming!
Chart.js plugin for Prometheus data loading
Welcome to chartjs-plugin-datasource-prometheus 👋 A Prometheus datasource for ChartJS. Dependencies: requires chart.js 2.7 or later. requires moment.
Chart.js plugin to defer initial chart updates
Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, vid
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb
Json2video-nodejs-sdk - Create videos programmatically in the cloud from NodeJS: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.
Create videos programmatically in Node JS Create and edit videos: add watermarks, resize videos, create slideshows, add soundtrack, automate the creat
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat
Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜
Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi
Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.
React Native UI Buttons ✨ Installation If you want to use icons make sure you have react-native-vector-icons installed in your project. npm install --
A lib for loading PDF in Android using WebView
A lib for loading PDF in Android using WebView Usage Including in your project Copy... /pdf/src/main/assets/... all files in the path Use val settings
A Portfolio with Animations in JavaScript
A Portfolio with Animations in JavaScript In this video I show you how to build a Portfolio with Animations and deploy it! To get 10% off on Hostinger
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bu
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
Create cool animated SVG spinners, loaders and other looped animations in seconds
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
Pure css cross-browser loading animations.
[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can
🔮 CSS loading animations made by single element.
Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only
CSS loading animations with minimal effort!
Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! 😅 ). It started as a drop in CSS file to get
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat
Loading effects for assets including some built in animated reveals
Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r
Modern ways of revealing new content using SVG animations.
Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe
A bursting particles effects buttons component ✨💥❄️🌋
vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel
Some ideas for modern multi-layer page transitions using CSS Animations.
Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore
A React component for creating typing animations.
react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bu
A script and resource loader for caching & loading files with localStorage
Basket.js is a script and resource loader for caching and loading scripts using localStorage ##Introduction for the Non-Developer Modern web applicati
A collection of loading spinners animated with CSS
Single Element CSS Spinners This is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of loader a
Buttons with built-in loading indicators.
Ladda Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Check out the demo page. Installation npm in
A collection of loading indicators animated with CSS
SpinKit Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily cust
Modern ways of revealing new content using SVG animations.
Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe
Automatically add a progress bar to your site.
PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a
:snowboarder: A responsive slider jQuery plugin with CSS animations
A responsive slider jQuery plugin with CSS animations Animations from animate.css Online demo Visit plugin website. Appszoom for developers also uses
:zap: A sliding swipe menu that works with touchSwipe library.
Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff
A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.
SoundJS SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, inclu
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal