Dynamic Progress Bar & Circle with CSS and JavaScript

Опубликовано: 06 Март 2021
на канале: Lama Dev

23,764

489

Progress bar and progress circle animation tutorial using Html, CSS, Javascript, and SVG. How to create animated Progress animation with vanilla JS.

Learn creative CSS animations: https://lama.dev/learn-css-animation
Learn SVG and SVG animations: https://lama.dev/learn-svg

Buy me a coffee: https://www.buymeacoffee.com/lamadev

Source Code: https://github.com/safak/progress-bar...

Join Lama Dev groups
Facebook:   / lamadev
Instagram:   / lamawebdev
Twitter:   / lamawebdev
Discord:   / discord

0:00 Introduction
1:30 Progress Bar Design
06:08 JavaScript Progress Bar Animation
14:37 Circular SVG Progress Design
19:23 SVG Dasharray and Dashoffset
20:48 Javascript Circular Progress Animation
27:45 Outro