A set of flat and 3D progress button styles where the button itself serves as a progress indicator

Overview

Progress Button Styles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

© Codrops 2013

You might also like...

A spinning activity indicator

spin.js An animated loading spinner No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all maj

Jan 7, 2023

Simple activity indicator for StimulusReflex (for Turbo/Turbolinks-enabled applications)

StimulusReflex Activity Indicator Uses the Turbo(links) progress bar to display activity while morphing. CleanShot.2021-07-23.at.12.04.05.mp4 Installa

May 26, 2022

Vue-cobra - 🐍 Reading position indicator for Vuejs

Vue-cobra - 🐍 Reading position indicator for Vuejs

vue-cobra A Vuejs component that indicates the position of the scroll as the user reads the page. Install npm npm install vue-cobra --save yarn yarn

Nov 11, 2022

🌬 Opiniated Nuxt 3 Starter — visual deployment indicator & more

Nuxt 3 Minimal Starter I recommend to look at the documentation. Key Features 🍍 State management with Pinia 📐 Prettier & ESLint 🔢 Pre-configured VS

Dec 7, 2022

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

SWTF (Simple Worklog Task Format) Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can wr

Apr 4, 2022

MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

May 17, 2022

Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog Web app A simple webapp prototype that serves tech news, blogs, and anythin

Nov 3, 2022

Resurrecting the thing that modifies and serves Prodigy's game files.

P-NP P-NP modifies and serves Prodigy's game files. Windows Quickstart Install Node.js with npm if you don't have it already. Install git if you don't

Nov 8, 2022

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Dec 30, 2022

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

Oct 23, 2022

A proxy web app that serves ABC iView content outside of the iView webplayer, avoiding intrusive data harvesting.

iview-proxy A proxy web app that serves ABC iView content outside of the iView webplayer, avoiding intrusive data harvesting. There's also a cool Andr

Jul 16, 2022

This repository serves as a starter kit for doing simple TDD exercise

This repository serves as a starter kit for doing simple TDD exercise

Feb 19, 2022

A prototype snap for injecting gas fee prices into a confirmation window that also serves as the basis for a 5-minute Snaps tutorial

A prototype snap for injecting gas fee prices into a confirmation window that also serves as the basis for a 5-minute Snaps tutorial

@Montoya/gas-fee-snap A simple Snap example based on @MetaMask/template-snap. Read below for a tutorial! Prerequisites Before you begin, make sure you

Dec 8, 2022

Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

Elastic Progress Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber. Article on C

Jan 1, 2023

Simple utils to pack arrays, objects and strings to a flat object (and back again).

packrup Simple utils to pack (and unpack) arrays and strings to a flat object. Status: In Development Please report any issues 🐛 Made possible by my

Dec 23, 2022

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

Nov 30, 2022

Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Nov 14, 2022

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

Dec 27, 2022

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Jan 3, 2023
Comments
  • How can i integrate in React.

    How can i integrate in React.

    I like to thank you for this progress bar. I love all these designs. but can you tell me how can I integrate a button in react? I used to flip over button in my react project but it doesn't show anything. I put all js files in index.html and import the component.css file in my button component. but still, it is not working.

    opened by join2akshay 0
Owner
Codrops
Codrops
Add live paragraph-, word- and character-counting to an HTML element.

Countable Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency l

Sacha Schmid 1.6k Dec 2, 2022
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Jan 4, 2023
jQuery plugin for styling checkboxes and radio-buttons

English description | Описание на русском jQuery-plugin for styling checkboxes and radio-buttons. With skin support. Version: 2.0.0 Project page and d

Denis Ineshin 70 Sep 24, 2022
Ngx-scrollbar-indicator - This will show an indicator with scrollbar

ngx-scrollbar-indicator Consider a scenario, where you have 100s of items, sorted alphabetically. Now, when user scrolls through the same, user doesn'

Dharmen Shah 5 Feb 2, 2021
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A plugin for Master Styles to group up styles and add selectors.

master-styles-group A plugin for Master Styles to group up styles and add selectors. THIS PROJECT IS IN BETA This project may contain bugs and have no

SerKo 5 Sep 27, 2022
Satyam Sharma 3 Jul 8, 2022
A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js

Twitter Broadcasts Search A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js. Live

Mohammad Mousad 2 Oct 6, 2022
It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@skynexui/responsive_stylesheet You don't need to be worried just because you have to support multiple screens ?? ?? ?? ?? It's a set of common utilit

SkynexUI 40 Oct 26, 2022
Bootstrap 5 spinner/loading/pending indicator for ,