Главная » Языки программирования

Css animated progress bar

Содержание
  1. 39 CSS Progress Bars
  2. 39 CSS Progress Bars
  3. Related Articles:
  4. Author
  5. Links
  6. Made with
  7. About a code
  8. 3D Circular Progress Bar
  9. Author
  10. Links
  11. Made with
  12. About a code
  13. Animated Skill Meter
  14. Author
  15. Links
  16. Made with
  17. About a code
  18. Progress Bar
  19. Author
  20. Links
  21. Made with
  22. About a code
  23. Custom Properties Step Progress Indicator
  24. Author
  25. Links
  26. Made with
  27. About a code
  28. Glitchy Progress Display
  29. Author
  30. Links
  31. Made with
  32. About a code
  33. Progress Bar Animation #2
  34. Author
  35. Links
  36. Made with
  37. About a code
  38. Circular Progress Bar
  39. Author
  40. Links
  41. Made with
  42. About a code
  43. Progress Bars
  44. Author
  45. Links
  46. Made with
  47. About a code
  48. CSS-Only Animated Progress Bars
  49. Author
  50. Links
  51. Made with
  52. About a code
  53. The Progress
  54. Author
  55. Links
  56. Made with
  57. About a code
  58. Progress
  59. Author
  60. Links
  61. Made with
  62. About a code
  63. Purple Progress Bar
  64. Author
  65. Links
  66. Made with
  67. About a code
  68. Pixel Progress Bar
  69. Author
  70. Links
  71. Made with
  72. About a code
  73. Color Changing Loading Progress Bar
  74. Author
  75. Links
  76. Made with
  77. About a code
  78. SVG Circle Progress Bar
  79. Author
  80. Links
  81. Made with
  82. About a code
  83. SVG Circle Progress Bar
  84. Author
  85. Links
  86. Made with
  87. About a code
  88. CSS Circular Progress
  89. Author
  90. Links
  91. Made with
  92. About a code
  93. Warning Bar
  94. Author
  95. Links
  96. Made with
  97. About a code
  98. Progress Scrollbar CSS Only
  99. Author
  100. Links
  101. Made with
  102. About a code
  103. Simple Progress Bar
  104. Author
  105. Links
  106. Made with
  107. About a code
  108. Only CSS Loading Animation
  109. Author
  110. Links
  111. Made with
  112. About the code
  113. Progress Bar Pure CSS
  114. Author
  115. Links
  116. Made with
  117. About the code
  118. Animation Progress Bars
  119. Author
  120. Links
  121. Made with
  122. About the code
  123. CSS Progress Bars
  124. Author
  125. Links
  126. Made with
  127. About the code
  128. Stepped Progress Bar
  129. Author
  130. Links
  131. Made with
  132. About the code
  133. Progress Bar
  134. Author
  135. Links
  136. Made with
  137. About a code
  138. Checkboxes Progress Bar
  139. Author
  140. Links
  141. Made with
  142. About the code
  143. Reading Progess Bar CSS Only
  144. Author
  145. Links
  146. Made with
  147. About the code
  148. Loading Bar
  149. Author
  150. Links
  151. Made with
  152. About the code
  153. Rainbow Progress Bar
  154. Author
  155. Create a custom-styled progress bar with Pure CSS and HTML
  156. Styling the progress
  157. Accent color
  158. Non-standard styling
  159. Pseudo-elements
  160. Cross-browser friendly solution
  161. Animating a progress bar with CSS
  162. Demo
Читайте также:  Html form action пример

39 CSS Progress Bars

Here is a list of some beautiful and creative CSS progress bars for you.

Pure CSS Progress

Dev: Rafael González

Pure CSS radial progress bar

Dev: Alex Marinenko

Skillset using HTML5 progress bars with CSS3 animations

Dev: Pankaj Parashar

Image Preloader Progress Bar

Dev: Derek Hill

CSS3 Radial Progress Bar

Dev: Geedmo

Animated Progress Bar

Dev: Thibaut

SVG Circle Progress

Dev: Jon Christensen

CSS progress bar with inverted colors

Dev: gediminas

CSS Progress Bar

CSS Progress Bar

Dev: Lennart Hase

Circular CSS Progress Bar

CSS 3D Loading bar

Donation Progress Bar

Dev: Stephen Emlund

Pixelated Progress Bar

Dev: Aleksandrs Cudars

CSS Bar Chart Using HTML5 Progress

Dev: Geoff Graham

Dev: Ychnightder-both

Purple Progress Bar

Dev: Jasper

3D Download Button w/ Meter Progress

Dev: Terence Devine

Loading Petal Spinner

Dev: Thomas Trinca

Progress bar animation

Dev: Eva Wythien

CSS 5 steps progress bar

Dev: alecs popa

Step Progress Bar

Dev: Grant Vinson

Light progress bar

Dev: FEAR ØF CODE

CSS 3 progress bar

Dev: Kitty Giraudel

Pixel Progress Bar

Dev: Ruben A Sanchez

Color Changing Loading Progress Bar

Dev: rachelmckean

SVG Circle Progress Bar

Dev: Ekta maurya

Warning bar

See the Pen Warning bar by Morgan (@mog13) on CodePen.

Dev: Morgan

CSS Circular Progress

Dev: Mattia Astorino

SVG Circle Progress Bar

Dev: Ekta maurya

Github goal progress bar

Dev: Andreas Storm

Simple progress bar animation

Interactive progress bar Pure CSS

Dev: Jenning

Progress bars

See the Pen Bars by Lucagez (@lucagez) on CodePen.

Dev: Lucagez

Reading Progress Bar CSS only

Dev: Ricardo Prieto

Rainbow Progress Bar

Dev: Antoinette Janus

Progress Bars

Dev: Kevin Sweeney

Loading Bar

See the Pen Loading Bar by Scott Clark (@saclark) on CodePen.

Dev: Scott Clark

Progress 99

Dev: simurai

Источник

39 CSS Progress Bars

Collection of hand-picked free HTML and CSS progress bar code examples. Update of January 2020 collection. 10 new items.

Author

Made with

About a code

3D Circular Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animated Skill Meter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Custom Properties Step Progress Indicator

Author

Made with

About a code

Custom Properties Step Progress Indicator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Glitchy Progress Display

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Progress Bar Animation #2

Author

Made with

About a code

Progress Bar Animation #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Circular Progress Bar

Author

Made with

About a code

Circular Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Progress Bars

Author

Made with

About a code

Progress Bars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS-Only Animated Progress Bars

Author

Made with

About a code

CSS-Only Animated Progress Bars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

The Progress

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Progress

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Purple Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pixel Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Color Changing Loading Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: SVG Circle Progress Bar

Author

Made with

About a code

SVG Circle Progress Bar

Compatible browsers: Chrome, Edge, Opera, Safari

Demo image: SVG Circle Progress Bar

Author

Made with

About a code

SVG Circle Progress Bar

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

CSS Circular Progress

Circular progress indicator made using CSS conic-gradient and custom properties.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Warning Bar

CSS animations, variables and gradients to create a scrolling warning bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Progress Scrollbar CSS Only

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Simple Progress Bar

Simple CSS progress bar with animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS Loading Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Progress Bar Pure CSS

Author

Made with

About the code

Progress Bar Pure CSS

Interactive progress bar pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Animation Progress Bars

Author

Made with

About the code

Animation Progress Bars

Progress bars with CSS animation .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Progress Bars

Author

Made with

About the code

CSS Progress Bars

CSS progress bars made with svg patterns.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Stepped Progress Bar

Author

Made with

About the code

Stepped Progress Bar

Stepped progress bar with little JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Progress Bar

Author

Made with

About the code

Progress Bar

HTML and CSS progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Checkboxes Progress Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Reading Progess Bar CSS Only

Author

Made with

About the code

Reading Progess Bar CSS Only

Experiment with a new value for the CSS position property to create a progress bar reading the articles without the need of using PHP or JavaScript, just HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Loading Bar

Author

Made with

About the code

Loading Bar

Pretty HTML, CSS and JS loading bar with gif image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Rainbow Progress Bar

Author

Made with

About the code

Rainbow Progress Bar

Pure CSS and HTML progress bar, using the repeating-linear-gradient .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Light Progress Bar

Author

Источник

Create a custom-styled progress bar with Pure CSS and HTML

A progress bar is a nice way to showcase the completion state of something. The default HTML element looks inconsistent across different browsers. Fortunately, there’s a way to give a custom style for the progress bar element.

To display a progress bar a progress tag is used, along with some attributes. The max attribute represents the maximum value of the progress bar. The value attribute represents the current value of the progress element.

Default progress bar appearance across different browsers:

Progress bar on Chrome Progress bar on Edge Progress bar on FireFox Progress bar on Safari

If no value attribute is specified the progress element will show up with the loading animation:

Styling the progress

Accent color

You can set the color of the current progress by defining the accent-color property.

progress  accent-color: coral; >

The accent-color property is a new thing and can be used to style form elements as well. However, at the time this article is written, it is lacking full browser support. So you shouldn’t rely on it much right now, but worth knowing about this property, to use it in the future.

Non-standard styling

Currently, there are some non-standard pseudo-elements available to style the progress tag parts. It is recommended not to use these selectors in production as the behavior is not consistent and may change in the future. But it’s worth knowing that these kinds of properties exist.

For these properties to work, first thing you’ll need to set the appearance of the progress element to none .

progress  -webkit-appearance: none; >

The first one is the ::-webkit-progress-bar pseudo-element. It represents the entire progress element. You can use it to set the background color. Will only work in browsers based on Blink or WebKit.

::-webkit-progress-bar  background-color: aliceblue; >

To style the actual value use the ::-webkit-progress-value selector for Blink or WebKit based browsers and ::-moz-progress-bar for Firefox browser.

::-webkit-progress-value  background-color: coral; > ::-moz-progress-bar  background-color: coral; >

Pseudo-elements

The progress element can also be styled with pseudo-elements, ::before representing the background and ::after representing the progress bar. However, pseudo-elements for the progress element are not supported by all browsers (Safari and Firefox don’t have support).

progress  position: relative; > progress::before, progress::after  content: ""; position: absolute; top: 0; left: 0; height: 100%; > progress::before  width: 100%; background: burlywood; > progress::after  width: 75%; background: brown; >

Cross-browser friendly solution

To make the progress bar look and behave the same way in all browsers you’ll need to wrap it in a div . The div will replace the appearance of the progress bar.

 class="progress-container">  value="75" max="100">75%

First, you need to hide the progress element by setting its opacity to 0.

Then, add the desired styles to the div . If you want it to take up the same width as the progress element, set the display property to inline-block . Otherwise, the div will span 100% of the container, and its width should be controlled via width property.

.progress-container  position: relative; display: inline-block; background: #eee; height: 20px; border-radius: 6px; overflow: hidden; >

To display the progress value we’ll use the ::before pseudo-element.

.progress-container::before  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 75%; background: turquoise; >

For the progress bar to be more descriptive let’s add a label and a numeric value. The p tag will represent the label, and its pseudo-element will display a numeric value.

 class="progress-element">  class="progress-label">HTML  class="progress-container">  max="100" value="75">75%   
.progress-label  position: relative; > .progress-label::after  content: "75%"; position: absolute; top:0; right: 0; >

Animating a progress bar with CSS

If you want to animate progress value on page load, you can add a CSS animation to the pseudo-element.

First, let’s create a keyframe for progress value animation. Since we will animate the width of the pseudo-element, the value will represent the progress percentage:

@keyframes progress-animation  to  width: 75%; > >

Then we need to set the pseudo-element width to 0 and then specify the animation property.

.progress-container::before  content: ""; position: absolute; top: 0; left: 0; height: 100%; background: turquoise; width: 0; animation: progress-animation .7s ease-in forwards; >

Finally to complete the animation we need to animate the percentage value stored in the pseudo-element. There’s a way to animate the numeric value using the CSS counter.

NOTE: Animating numeric values using CSS is not supported by all browsers! So as a workaround you can set pseudo-elements’ content value to a progress value (e.g. “75%”) without animation.

@property --num  syntax: ''; initial-value: 0; inherits: false; > .progress-label::after  counter-reset: num var(--num); content: counter(num) '%'; position: absolute; top:0; right: 0; animation: progress-text 1s ease-in forwards; > @keyframes progress-text  to  --num: 75; > >

Demo

The end result can be viewed on CodePen:

Источник

Оцените статью
© 2024 Программирование