Guest User

Untitled

a guest
Nov 14th, 2018
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.17 KB | None | 0 0
  1. <!-- Horizontal, rounded -->
  2.  
  3. <div class="container horizontal rounded">
  4. <h2>Horizontal, Rounded</h2>
  5. <div class="progress-bar horizontal">
  6. <div class="progress-track">
  7. <div class="progress-fill">
  8. <span>100%</span>
  9. </div>
  10. </div>
  11. </div>
  12.  
  13. <div class="progress-bar horizontal">
  14. <div class="progress-track">
  15. <div class="progress-fill">
  16. <span>75%</span>
  17. </div>
  18. </div>
  19. </div>
  20.  
  21. <div class="progress-bar horizontal">
  22. <div class="progress-track">
  23. <div class="progress-fill">
  24. <span>60%</span>
  25. </div>
  26. </div>
  27. </div>
  28.  
  29. <div class="progress-bar horizontal">
  30. <div class="progress-track">
  31. <div class="progress-fill">
  32. <span>20%</span>
  33. </div>
  34. </div>
  35. </div>
  36.  
  37. <div class="progress-bar horizontal">
  38. <div class="progress-track">
  39. <div class="progress-fill">
  40. <span>34%</span>
  41. </div>
  42. </div>
  43. </div>
  44.  
  45. <div class="progress-bar horizontal">
  46. <div class="progress-track">
  47. <div class="progress-fill">
  48. <span>82%</span>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54. <!-- Horizontal, flat -->
  55.  
  56. <div class="container horizontal flat">
  57. <h2>Horizontal, Flat</h2>
  58. <div class="progress-bar horizontal">
  59. <div class="progress-track">
  60. <div class="progress-fill">
  61. <span>100%</span>
  62. </div>
  63. </div>
  64. </div>
  65.  
  66. <div class="progress-bar horizontal">
  67. <div class="progress-track">
  68. <div class="progress-fill">
  69. <span>75%</span>
  70. </div>
  71. </div>
  72. </div>
  73.  
  74. <div class="progress-bar horizontal">
  75. <div class="progress-track">
  76. <div class="progress-fill">
  77. <span>60%</span>
  78. </div>
  79. </div>
  80. </div>
  81.  
  82. <div class="progress-bar horizontal">
  83. <div class="progress-track">
  84. <div class="progress-fill">
  85. <span>20%</span>
  86. </div>
  87. </div>
  88. </div>
  89.  
  90. <div class="progress-bar horizontal">
  91. <div class="progress-track">
  92. <div class="progress-fill">
  93. <span>34%</span>
  94. </div>
  95. </div>
  96. </div>
  97.  
  98. <div class="progress-bar horizontal">
  99. <div class="progress-track">
  100. <div class="progress-fill">
  101. <span>82%</span>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106.  
  107.  
  108. <!-- Vertical, rounded -->
  109.  
  110.  
  111. <div class="container vertical rounded">
  112. <h2>Vertical, Rounded</h2>
  113. <div class="progress-bar">
  114. <div class="progress-track">
  115. <div class="progress-fill">
  116. <span>100%</span>
  117. </div>
  118. </div>
  119. </div>
  120.  
  121. <div class="progress-bar">
  122. <div class="progress-track">
  123. <div class="progress-fill">
  124. <span>75%</span>
  125. </div>
  126. </div>
  127. </div>
  128.  
  129. <div class="progress-bar">
  130. <div class="progress-track">
  131. <div class="progress-fill">
  132. <span>60%</span>
  133. </div>
  134. </div>
  135. </div>
  136.  
  137. <div class="progress-bar">
  138. <div class="progress-track">
  139. <div class="progress-fill">
  140. <span>20%</span>
  141. </div>
  142. </div>
  143. </div>
  144.  
  145. <div class="progress-bar">
  146. <div class="progress-track">
  147. <div class="progress-fill">
  148. <span>34%</span>
  149. </div>
  150. </div>
  151. </div>
  152.  
  153. <div class="progress-bar">
  154. <div class="progress-track">
  155. <div class="progress-fill">
  156. <span>82%</span>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161.  
  162.  
  163. <!-- Vertical, flat -->
  164.  
  165.  
  166. <div class="container vertical flat">
  167. <h2>Vertical, Flat</h2>
  168. <div class="progress-bar">
  169. <div class="progress-track">
  170. <div class="progress-fill">
  171. <span>100%</span>
  172. </div>
  173. </div>
  174. </div>
  175.  
  176. <div class="progress-bar">
  177. <div class="progress-track">
  178. <div class="progress-fill">
  179. <span>75%</span>
  180. </div>
  181. </div>
  182. </div>
  183.  
  184. <div class="progress-bar">
  185. <div class="progress-track">
  186. <div class="progress-fill">
  187. <span>60%</span>
  188. </div>
  189. </div>
  190. </div>
  191.  
  192. <div class="progress-bar">
  193. <div class="progress-track">
  194. <div class="progress-fill">
  195. <span>20%</span>
  196. </div>
  197. </div>
  198. </div>
  199.  
  200. <div class="progress-bar">
  201. <div class="progress-track">
  202. <div class="progress-fill">
  203. <span>34%</span>
  204. </div>
  205. </div>
  206. </div>
  207.  
  208. <div class="progress-bar">
  209. <div class="progress-track">
  210. <div class="progress-fill">
  211. <span>82%</span>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
Add Comment
Please, Sign In to add comment