Scroll-Linked Animations: Progress Bar

19.02.2021

Made with: HTML,CSS,JS

View Code

Scroll-Linked Animations: Progress Bar

Progresscar With Custom Css Properties

11.02.2021

An interesting way to show what custom CSS properties can do for us.

Made with: HTML,CSS,JS (Babel)

View Code

Progresscar With Custom Css Properties

Css Progress Bars

27.01.2021

They should stretch fine to whatever the width of the container element is, or just set it. Also they should stretch fine to whatever height you give .meter.

Made with: HTML,CSS,JS

View Code

PlaceholderCss Progress Bars

Styled Progress

10.12.2020

Made with: HTML (Pug),CSS (Stylus),JS (Babel)

View Code

Styled Progress

Css Scroll Effects

2.09.2020

Made with: HTML,CSS,JS

View Code

Css Scroll Effects

Progress Bar

2.09.2020

Made with: HTML,CSS,JS

View Code

PlaceholderProgress Bar

Scrolling Progress Bars With Css Variables

1.09.2020

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderScrolling Progress Bars With Css Variables

Vanilla Scroll Progress Bar/Indicator

23.08.2020

Examples of simple vanilla scroll progress bar/indicators.

Made with: HTML,CSS,JS

View Code

PlaceholderVanilla Scroll Progress Bar/Indicator

Circular Progress Bar

10.08.2020

Made with: HTML,CSS,JS

View Code

PlaceholderCircular Progress Bar

Progress Bar Lite

9.08.2020

A simple percentage bar asset with intuitive animation.

Made with: HTML,CSS,JS

View Code

PlaceholderProgress Bar Lite

Circular Progress Bar

3.08.2020

Made with: HTML,CSS,JS

View Code

PlaceholderCircular Progress Bar

Progress Bar

24.07.2020

Made with: HTML,CSS,JS

View Code

PlaceholderProgress Bar

Upload Progress Animation Microinteraction With Gsap

20.07.2020

On the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a speech bubble above the progress bar will be shown. That speech bubble shows the percentage of the upload progress. The speech bubble will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state.

Made with: HTML,CSS,JS

View Code

Upload Progress Animation Microinteraction With Gsap

Radial Animated Progress

15.07.2020

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderRadial Animated Progress

Progress Bars

17.01.2020

Needs native conic-gradient() support and Houdini support to work (Experimental Web Platform features flag enabled). So at this point (January 2020), it's Chromium only.

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Progress Bars

Fluid Meter Exaples

15.01.2020

Made with: HTML,CSS,JS

View Code

PlaceholderFluid Meter Exaples

Custom Progress Bar

2.01.2020

Made with: HTML,CSS,JS

View Code

Custom Progress Bar

3D Progress Bar

30.12.2019

3D progress bar in vanilla JavaScript.

Made with: HTML,CSS (SCSS),JS

View Code

Placeholder3D Progress Bar

Progress

29.12.2019

Made with: HTML,CSS,JS

View Code

PlaceholderProgress

Circle Progress

4.10.2019

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderCircle Progress