设为首页收藏本站 今天是: 2021-09-23    "国际聋人节"  关注听力障碍者

站内搜索

搜索
热搜: 活动 交友 discuz

寻宝楼论坛

[网页源码] 纯CSS进度条3D进度条

名人堂:
No.1
88888888

1529

主题

1626

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

威望
300
贡献
154
金币
12618 枚
精华
4篇
在线时间
371 小时
注册时间
2020-5-12
最后登录
2021-9-20

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老吾是土豪帅哥认证问题达人吾是智囊精品之王我是单身我拍谁!!!好人卡!!!

版主专享版主专享

发表于 2021-2-13 16:09:26 | 显示全部楼层 |阅读模式
纯CSS进度条3D进度条49 作者:挽弦暮笙 帖子ID:578
! t+ o* y9 h( {6 H9 w$ `% S+ x" g 纯CSS进度条3D进度条89 作者:挽弦暮笙 帖子ID:578
( ]$ {7 O. j! P7 d- {0 h' L% E& ^2 R$ m: Y+ ?
  1. <html lang="en"><head>
    # R/ O- O% N$ ?0 m+ g9 W# a* T( u/ a  c. J
  2. - l+ X: n  w9 P, g6 B
  3.   <meta charset="UTF-8">& g' S) e- |- G! I4 a
  4.   : M5 A7 Q& v- p$ W* {
  5. <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">$ C. L# H$ v+ j" v" t' }& E5 e0 `
  6. <meta name="apple-mobile-web-app-title" content="CodePen">
    3 f( i  G  A" [- X  {" _( s. k, s! `
  7. 5 N. A, l6 h# g" w
  8. <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    * o( L& R5 O- L$ U6 T9 p; m
  9. . h+ |. w' m8 ~6 k- s
  10. <link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
    - v- k, ]0 C  w& D" I
  11. ' O" @: }. f' Y5 v
  12. # N( |) G, c) z, d
  13.   <title>CodePen - Pure CSS Progress</title>
      \) [# L) X/ y& [, N2 s, ?& l
  14.   <meta charset="utf-8">
    * ^" y+ |) G1 a. q- i# E
  15.     <title>Pure CSS Progress</title>3 L+ q5 D2 h* t6 {: k2 Q
  16.     <meta name="description" content="Pure CSS Progress, a pretty liquid progress-bar by RGG">4 z" X6 J2 j6 s  x* Y4 O
  17.     <meta content="chrome=1" http-equiv="X-UA-Compatible">
    " f- w$ N, p5 L
  18.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">5 ]% g7 O/ D# C! @0 W1 k8 ~
  19.   
    ( o4 B& J1 [" u( M( Q- G
  20.   ( [) @1 L1 X9 `1 m7 Q0 G3 {) Y5 _
  21.   
    * D7 h* P; r4 V; K2 q% T& j5 c
  22. <style>2 e; |, v2 a- q
  23. @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);! M) G: [5 C$ o
  24. html, body, div, span, applet, object, iframe,
    . {1 s* b4 N# B" l# ~
  25. h1, h2, h3, h4, h5, h6, p, blockquote, pre,- T0 ^7 B& E9 n
  26. a, abbr, acronym, address, big, cite, code,! C1 [. R; ?  F
  27. del, dfn, em, img, ins, kbd, q, s, samp,
    ; M2 ^. G0 Z! \' L& q/ ]
  28. small, strike, strong, sub, sup, tt, var,
    ' g. J' I/ F( p" l1 c# w
  29. b, u, i, center,/ l4 f0 s( e! Y' o! m
  30. dl, dt, dd, ol, ul, li,
    1 G3 U( I0 v+ f  J
  31. fieldset, form, label, legend,3 A; s4 ~; `% j$ Y  ]# Q; K9 t" }
  32. table, caption, tbody, tfoot, thead, tr, th, td,% k: i; v. K/ Z8 f+ m
  33. article, aside, canvas, details, embed," I' D2 i9 W) U* U  V
  34. figure, figcaption, footer, header, hgroup,
    . C& J" p2 z, c) Y9 g! g
  35. menu, nav, output, ruby, section, summary,
    6 K7 e/ h; t8 J: O% x% [" w$ h& k# o& w
  36. time, mark, audio, video {9 d  Q6 e* m. C
  37.   margin: 0;
    7 z% j& l3 O/ H9 I) Y- h  V/ y
  38.   padding: 0;
    3 ]+ r, R/ _9 ^2 [6 q% j
  39.   border: 0;1 A! s2 G5 c8 M; m
  40.   font: inherit;2 g4 @9 g5 w, c
  41.   font-size: 100%;
    & W; i/ g+ X+ \2 T: H- ?4 i
  42.   vertical-align: baseline;8 l% T. M; M5 R$ X$ X! |
  43. }
    4 a& r" q9 z% z5 V& g- A7 b

  44. * z, O5 p( c) _6 [5 v, x7 y+ N
  45. html {5 G; |. V) o/ A
  46.   line-height: 1;
    6 @5 o! F. j5 I, A
  47. }. w' b. ]: k- d
  48. " g) u) N( D6 q# |
  49. ol, ul {, T1 U4 f1 I! f. {1 H
  50.   list-style: none;+ V0 @2 `7 j4 Q1 C& E
  51. }
    ; o( A/ b) q4 p) S/ J* E
  52. 8 ~7 b( w+ F1 T& C" U
  53. table {1 D% J7 x! J- A; \6 Z* d
  54.   border-collapse: collapse;% D- w9 w% [5 P  ?% V0 r% B
  55.   border-spacing: 0;0 ^# d, M2 a9 h- ?* b
  56. }
    4 W- ~0 U% o( X/ A6 q& x
  57. . t5 f+ j: w& l2 V8 d4 E
  58. caption, th, td {
    0 Q" |7 r% X9 ?8 v7 P, R3 S
  59.   text-align: left;' [* p) ~9 x, V: l/ F4 b
  60.   font-weight: normal;
    8 D" {/ m# A4 t4 i
  61.   vertical-align: middle;
    ; d5 a1 K9 Z3 N
  62. }2 q! ]2 y$ F% H. L6 q6 e& b, a

  63. + ~9 Y% Q9 y4 W# h  C# G% j
  64. q, blockquote {; s' ~" J9 e5 s: Y3 ?/ _
  65.   quotes: none;5 m* \! Y" |* p9 L
  66. }
    & F- |9 U6 i+ g/ K) S
  67. q:before, q:after, blockquote:before, blockquote:after {5 |  Q& B3 G' Q1 L+ U5 k
  68.   content: "";
    6 \3 }8 f, Y. P5 E+ I8 ^$ W
  69.   content: none;9 w# |, ~7 N! G0 d7 _' W$ N  G! D% `
  70. }+ Q# H8 P9 |9 H4 [6 ]

  71. % {6 s0 _' k- @) S
  72. a img {$ w  M& ?9 J2 P* `- p( n7 F& x
  73.   border: none;
    / }2 q+ n6 c' n4 Y7 B6 J
  74. }1 _9 l: f: Q8 t/ H
  75.   e; X- ]1 ?1 u! Z+ J& t8 w
  76. article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {! ^' ^2 f4 W) k  C* O9 t
  77.   display: block;
    3 e5 c) G6 z' x* R' j9 k
  78. }! p: t( v4 c! V- S

  79. 6 l3 u/ y' B! U5 v) [4 }
  80. body {
    9 R7 l% I) I  j8 _+ I( @' P
  81.   font-family: 'Open Sans', sans-serif;6 }: [. R7 O1 g: E3 _
  82.   font-size: 16px;
    , w) E8 I9 Q! m/ l# Z+ q% g
  83.   font-weight: 300;, U1 j1 I' n2 n1 c% w% o: \
  84.   line-height: 1em;
    * J; y: I  S  Z. D8 i
  85.   text-align: center;
    / u, ]" \" C" f. Q# p: \9 w
  86.   color: #444;$ t$ Y( r$ h5 `9 ^/ ~
  87.   background: #d0d0d0;
    ' y8 m7 P8 `# g- `9 J9 h
  88. }9 O0 J, P6 ]7 t! A; M* F/ Y

  89. 0 h3 n4 S' x/ d1 R: [# ?
  90. h1 {
    3 Y  r5 l0 c+ n( [) _  ]1 E
  91.   font-size: 2.5em;% y1 P+ \# s; S0 u7 q/ B; E
  92.   margin: 2em 0 .5em;. ^, r5 f1 W9 U( Y
  93. }( e; m. G  [3 _$ R& m8 r4 n. A6 J

  94. 3 D4 |0 n5 ~6 N9 v1 C2 v
  95. h2 {
    ! l' i4 g! b0 \- K9 k" `& g
  96.   margin-bottom: 3em;
    ! L/ [6 ]- _) J- ^/ y
  97. }! ^, k/ m  q% [; L3 K
  98. " u+ E1 o  I  q7 D/ H( U
  99. em,
    4 s/ C* B* T5 I5 D% j# p
  100. strong {% Y9 N8 J' h* N' p. e, @6 F& K# K( e
  101.   font-weight: 700;+ Z: R/ b* I( t# X# k+ M
  102. }# ?2 ^; s+ k6 q' e0 g% Q. A: s6 H
  103. 0 u0 t6 E3 c1 C& S) u; K
  104. input {
    / c& k7 `& B4 G. C
  105.   display: none;9 x) n7 m% R$ G! W- N5 l
  106. }  H. A' x0 f( k5 n' e

  107. ' Y) X5 D6 z$ Y
  108. header p {
    ' u  C+ U7 L9 {' ^9 T7 T$ O$ ]
  109.   margin-bottom: 0;
    8 O1 S9 |/ @$ A- A* D( J5 `( Z
  110. }
    & L( D4 a6 J4 w  s/ a# b
  111. . E( B: O  r7 Q  f
  112. section {
    # z& T: k) G/ \/ ?8 `' z( h' {1 }4 e
  113.   display: flex;
    & w; b& N# w, r9 Y! D$ m+ y  }2 H
  114.   justify-content: center;. c: B- D) [. W2 B) y/ S& [. d
  115.   flex-direction: column;
    + n$ K& f. Q( P  K1 r
  116.   margin-bottom: 2em;+ P0 W* Z- D7 N" ]% j3 Y. k
  117.   padding: 0;7 t! M9 s1 y, T! ?& ~
  118. }
    ( j4 q+ A' Q9 I
  119. section:last-of-type {2 k# @" E% i, c5 m5 ^( ~! T' \
  120.   margin-bottom: 0;
    & O7 _3 C  |/ F5 M$ d9 }5 p1 }
  121. }* j! B3 M+ b, N4 z' K; a
  122. section article {
    ; }6 K% o& }( V2 R
  123.   align-self: center;
    - m, _0 ~, W9 P$ m4 }
  124.   width: 20em;
    " S+ s: C/ e9 t; z
  125.   margin-bottom: 2em;
    # y4 q0 f  k( Q; O. ~; Q2 `$ T
  126. }
    9 ~/ q+ {) W6 k" z7 C; a9 A& b
  127. section article p, section article:last-of-type {; U( R: R& Y/ c/ M3 y" A9 u
  128.   margin-bottom: 0;7 y/ ?7 u/ p. J/ T  z
  129. }
    + K( x  c# u. \$ g1 a
  130. 5 j6 g6 S+ V1 `; L3 N
  131. p {
    6 I9 M; j$ c+ S9 l- t" B
  132.   line-height: 1.5em;
    2 y% V* [& m7 ~/ ^( n) G( C9 [2 p/ b
  133.   max-width: 20em;
    0 D4 L5 B* q* D+ E& [
  134.   margin: 1.5em auto 2em;4 r' Q, z, v; _% s
  135.   padding-bottom: 1.5em;
    " o( C3 i/ R) q+ B$ w2 N) B: L
  136. }
    6 t: R2 Q+ R& o$ o
  137. p span {: e7 f$ }" P& C5 }  t
  138.   display: block;# E1 O' Q7 Y% N, G- `  s7 [
  139. }% [/ h1 A" s( y" N6 q8 _

  140. 7 Y# S- a% S# f3 J7 w9 ^$ r5 i$ e
  141. .container {" \  D- a" L" y- F* {
  142.   z-index: 1;
    4 g& {* Z! b9 ~% N" d
  143.   display: flex;4 `: w2 ^  g4 L6 Y0 s5 x. z$ ^
  144.   overflow: hidden;; h- @! A, v3 S$ L0 s3 v
  145.   flex-direction: column;
    / m: R) L2 }* v8 P& d! J
  146.   justify-content: center;( @: W( n3 H% O- L& q$ x5 E
  147.   margin-bottom: 4em;) C( \9 p5 ^6 l7 E
  148. }- S3 g# E1 i4 Q1 t

  149. ) V. C: V5 Z  }
  150. /*
    0 R& n* X) I" o! {( u( E
  151. *
    - H" I5 L4 o) D2 D5 D6 T
  152. *
    ; s/ c: c/ C( `! L9 Z' \! Z
  153. START // CHART'S RULES* q  P/ B2 f* Z% M' _+ k7 P) [4 i+ w
  154. -> "if you're picking code, don't forget the variables :)"
    2 e$ b1 T0 F8 p' Y& ]& A4 m
  155. */7 ]$ u8 i; G0 C3 c7 s- W$ [7 r
  156. .chart {2 x9 H5 b0 u) M0 s
  157.   font-size: 1em;
    % z. F% c6 E* l7 c6 V3 d. {) D+ q% D4 i6 P
  158.   perspective: 1000px;
    * e( _- a5 ?; f" g- u9 \
  159.   perspective-origin: 50% 50%;
    . y5 B, s& Q1 D; ?5 i! V6 ?
  160.   -webkit-backface-visibility: visible;9 e- T9 k8 A; w1 B$ j
  161.           backface-visibility: visible;
    5 g! E4 J' I* }0 L7 v. \
  162. }4 H2 d5 n4 i8 q4 J; W. }9 ~# H2 T9 _

  163. , h8 Q* k" r( _3 n
  164. .bar {
    ) T* V$ k% y+ s
  165.   font-size: 1em;
    # ?3 j7 B- E6 A! O" j, H7 Y
  166.   position: relative;
    4 k; v  v; e- w. L
  167.   height: 10em;
    9 `" p# A3 v0 m7 Y6 x6 f! L+ C
  168.   transition: all 0.3s ease-in-out;6 s% n; K; Q7 }2 l8 ]0 b0 ?2 U: v" S) R
  169.   transform: rotateX(60deg) rotateY(0deg);
    ; A. n8 i4 }6 e$ U% C
  170.   transform-style: preserve-3d;  H) o- u2 N. ~" h0 \9 t3 V" p
  171. }
    ) \. F; z& `% m+ v( Y; r
  172. .bar .face {, h2 k/ `6 J, g; d' Y
  173.   font-size: 2em;
    4 F& Y+ z# W: {
  174.   position: relative;
    1 w  w, J( g+ J% u
  175.   width: 100%;
    ! Z, o. _8 y* `8 p
  176.   height: 2em;
    . u0 G6 e2 Q: q
  177.   background-color: rgba(254, 254, 254, 0.3);  Y2 k9 D! p" N6 r; p
  178. }7 [2 B/ S( }0 @5 N$ D8 C$ e
  179. .bar .face.side-a, .bar .face.side-b {! F1 m/ K  m+ L' ?; U' H1 P% @1 v
  180.   width: 2em;
    6 P  V  C5 V! [  ]
  181. }
    7 g% g, F: O2 O- `# @% y4 x
  182. .bar .side-a {: H  {2 g9 Y; Y9 }# T4 ?
  183.   transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
    8 @* ?/ K% u& s7 w
  184. }( w  @! g% g' w  K% v* I
  185. .bar .side-b {. k, {7 @0 x' B) `+ u& i" s
  186.   transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);/ F, N- J' X- U& o) v1 U" r
  187.   position: absolute;
    7 P4 I7 V" v: A1 n: c
  188.   right: 0;4 I  X  B( p& m* b0 c5 E0 K
  189. }( {. L% h$ A7 l3 C( i! x
  190. .bar .side-0 {
    5 N7 k3 y* ^; h/ f  o- G
  191.   transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
    / X4 c  k! T# H) \6 R6 W& K
  192. }
    - u* }; X; Y' E7 o0 \6 B6 c
  193. .bar .side-1 {
    1 }" q6 O) k! T( R- ]* o
  194.   transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
    3 o6 j. c: G9 m) t. i- x1 V! m. s
  195. }
    : B* k& E7 T+ L$ L; j; ~1 J
  196. .bar .top {
    ! d$ l! L( x. `  m2 m) f6 s" _# X
  197.   transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
    ( ?# f; [7 O; B8 {
  198. }
    , X. T0 o5 l  t  H1 b5 f" e
  199. .bar .floor {- A7 h2 {) D. h/ @" U' Q/ a" x2 I
  200.   box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;; B% r( P: O5 M& D; I* \
  201. }" G! l! C& a1 P8 `1 A7 z8 a
  202. 6 r0 w- S. O0 D* A
  203. .growing-bar {
    + Z% ], R# J" T3 [# s- R$ a
  204.   transition: all 0.3s ease-in-out;4 v$ w0 U! [) S/ Y2 Z4 N
  205.   background-color: rgba(236, 0, 140, 0.6);% ]: d  g$ K* s/ b! t" [1 J
  206.   width: 100%;
    6 M# c8 ~$ ]2 a- q7 Q+ |8 e$ q
  207.   height: 2em;4 M* q- E+ O# E# q
  208. }' O7 n$ ^8 O+ z
  209. 8 g. O4 R$ _: ]# h* ]2 }  a6 A8 B- T
  210. .bar.yellow .side-a,7 Y/ V! G( }5 f
  211. .bar.yellow .growing-bar {
    9 c; U. |6 V( I* F
  212.   background-color: rgba(241, 196, 15, 0.6);: T( y0 e, p: F4 D+ @3 C
  213. }" O4 B- e/ l2 z; p# G- E2 A
  214. .bar.yellow .side-0 .growing-bar {% D7 U- s" h8 y/ m5 w4 R) M' S
  215.   box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);7 ]' a- ~4 M; `
  216. }
    8 ^8 A8 a0 z7 X" ^  z
  217. .bar.yellow .floor .growing-bar {
    6 L5 }" Z1 D# x" [  U! ?) e
  218.   box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
    & t/ Q4 \5 B8 N
  219. }
    0 H9 e/ N- Z* l/ m

  220. ! i" U# \2 Z5 m1 R
  221. .bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
    & x2 d9 [, w9 H9 z& ]
  222. .bar.red .growing-bar,
    ; ?3 E; F1 m8 J% V9 y4 E0 [
  223. input[id='red']:checked ~ .chart .growing-bar {
      _, k# ^. Y8 s! I* I+ ~8 ]( J
  224.   background-color: rgba(236, 0, 140, 0.6);
    ( k1 `/ P6 c" c$ B- M! O
  225. }
    ! s. v( N5 z0 G4 }+ F5 D2 \8 c- r4 v
  226. .bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {9 V; g/ F$ |6 Y9 M& N
  227.   box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
    * x% n2 j/ p. O2 g- V' J
  228. }
    5 F/ F5 j0 Z( c* D4 {$ E
  229. .bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
    # O6 V) l4 h& R& i
  230.   box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
    / y: C! Z. y" l. n4 {5 [8 i
  231. }
    , U7 V- @8 M4 b$ u. m
  232. - V# M9 V- U/ w* j4 A' I3 a- t
  233. .bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
    % ?6 b& B: _( a4 @
  234. .bar.cyan .growing-bar,* R3 W5 ?& S6 C; T( P
  235. input[id='cyan']:checked ~ .chart .growing-bar {
    ! |  n) z+ G' S- Z5 R
  236.   background-color: rgba(87, 202, 244, 0.6);
    + A+ S3 `3 }8 \6 u6 B$ p' j4 t
  237. }7 ^& n4 v% a& u  M& |
  238. .bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
    + y3 J( M4 I" F' F, K
  239.   box-shadow: -0.5em -1.5em 4em #57caf4;3 b; i' l/ B% a: {
  240. }
    0 E' u# h' m2 o. `& Z/ ?
  241. .bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {8 |. N6 l5 O9 K  y& s9 M
  242.   box-shadow: 0em 0em 2em #57caf4;
    4 C% {( s1 X* E( t; I! }% \( a
  243. }
    " L8 o0 u$ L# I4 c. V5 z

  244. + E* f7 I) D. ^
  245. .bar.navy .side-a,
    $ f& Y% r! _# M0 T8 B$ ^; y5 U
  246. .bar.navy .growing-bar {8 U. O. s  q6 \) m9 p2 Z  z0 H
  247.   background-color: rgba(10, 64, 105, 0.6);
    . Z8 g0 f: v* R) ?
  248. }
    7 G. Q4 `: v2 h- o( X
  249. .bar.navy .side-0 .growing-bar {
    " R  _8 b# |9 B
  250.   box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);& b- M, S% ]+ t$ Y/ Y
  251. }
    ; v  }8 y  u- ^6 i8 j; G/ |
  252. .bar.navy .floor .growing-bar {- m$ R2 a6 m! u  V* N, S% l$ F( @
  253.   box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
    * n7 x1 B1 {7 @' _/ @! `+ S. N$ t
  254. }
    ( J- c. X8 c1 ~4 d! [6 x" Z7 ]8 U
  255. , m8 ~& _0 N5 O' _
  256. .bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,7 d6 n0 g3 t: b) y- V) D8 s, r6 g. P
  257. .bar.lime .growing-bar,
    & t1 n' s0 ^) v: X' f" o
  258. input[id='lime']:checked ~ .chart .growing-bar {" M( F- X. w3 a/ p, C: |4 {0 l
  259.   background-color: rgba(118, 201, 0, 0.6);1 f& |  e0 x. ^4 @
  260. }  e3 R5 j0 C/ _- Q- v
  261. .bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {6 L8 q( l1 y9 \. J6 v
  262.   box-shadow: -0.5em -1.5em 4em #76c900;3 p: K1 A$ @0 u! H$ i7 M, M$ a& S
  263. }
    ! [0 r% I4 x5 a- k, Q0 A$ O9 B+ e
  264. .bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {: \5 `6 c$ K$ R  H* T; Y  E8 A  h
  265.   box-shadow: 0em 0em 2em #76c900;
    9 ]- q+ v3 g+ s3 _
  266. }
    $ I* S. l; s6 f; ]  L( M2 K, W
  267. % T! ]! @0 z8 X! n( }% g
  268. .bar.white .side-a,! o7 k7 B" W* _/ m2 z, R: e
  269. .bar.white .growing-bar {$ \  N, z* X% e' T& n
  270.   background-color: rgba(254, 254, 254, 0.6);
    : z* J$ \& {/ @5 {0 U$ x2 {
  271. }
    9 B3 J# b3 C7 b( S1 }, ?1 f# k
  272. .bar.white .side-0 .growing-bar {
    $ _; M( J/ c3 S2 W$ {% n
  273.   box-shadow: -0.5em -1.5em 4em #fefefe;6 E5 L& [% e4 c+ x1 H3 o
  274. }
    ) k1 E. r, N0 ]2 D, w3 ~
  275. .bar.white .floor .growing-bar {
    8 A+ Z; H6 Q$ I1 J  k; V8 B
  276.   box-shadow: 0em 0em 2em #fefefe;# S' g  P+ O+ o/ D* `+ H! Z4 l
  277. }
    ; l7 Q" |; j3 r4 ?% i9 i

  278. ' L3 K" z* {4 D* z; G- c6 s
  279. .bar.gray .side-a,( f* B1 m6 }6 S
  280. .bar.gray .growing-bar {
    8 z% h- L  B' d
  281.   background-color: rgba(68, 68, 68, 0.6);
    ( G7 x0 X1 K; Q  b- _, z2 ^& F
  282. }
    4 M; h! z0 ^  |' N
  283. .bar.gray .side-0 .growing-bar {3 z9 h, s8 ^0 N$ N  g- [  l
  284.   box-shadow: -0.5em -1.5em 4em #444;
    9 \. Y2 ?+ p3 Y# C9 r: O- J
  285. }
    9 K6 V7 W( U5 m7 z# H1 l  p; m. j
  286. .bar.gray .floor .growing-bar {2 j* N, B# t. ?7 F" o6 v; J: ?
  287.   box-shadow: 0em 0em 2em #444;
    ! W. ^. C& J& G/ ]8 O
  288. }; H) Q  e1 o& a
  289. 6 r' A" |  U$ P4 Q
  290. .chart .bar.yellow-face .face {5 v) X9 u# B4 U8 d# V. R
  291.   background-color: rgba(241, 196, 15, 0.2);
    ' C- F3 v6 ?9 ^* X# ~: R# M5 j% M
  292. }
    ' N4 [6 L' k9 i2 R- A
  293.   B# ^3 ^, `& P, z" t
  294. .chart .bar.lime-face .face {5 W2 X6 z0 C  K
  295.   background-color: rgba(118, 201, 0, 0.2);
      K8 J" ~& l, I9 M
  296. }
    , u" _2 j+ |- q. g4 M& q5 [

  297. " \. [* K, e0 ?, n3 E
  298. .chart .bar.red-face .face {) |$ j. Q6 ~2 U
  299.   background-color: rgba(236, 0, 140, 0.2);& i, e  r% i+ E6 u2 `# N
  300. }
    4 ]7 c, Y" f' I$ H  Q& `6 y
  301. $ N' t# K4 |& a% ]* Y
  302. .chart .bar.navy-face .face {
    : Q6 M! V* p, L
  303.   background-color: rgba(10, 64, 105, 0.2);% H8 c* M/ K2 \0 X4 n/ ^
  304. }
    * ]) D3 ?+ T( {
  305. ( Y3 n0 M+ [5 o- ?% R9 N' j- ?
  306. .chart .bar.cyan-face .face {3 g; |, J, f4 K4 H# S  @& I0 ~! \* `
  307.   background-color: rgba(87, 202, 244, 0.2);
    9 F2 p( N- Y' q9 s7 m0 }6 P3 P# }
  308. }
    : z+ E- b- ]# x! q9 Z* A5 }7 U
  309. , A+ [7 [7 M. |: x0 B
  310. .chart .bar.gray-face .face {8 A( |9 K3 F. Q2 ^
  311.   background-color: rgba(68, 68, 68, 0.2);
    9 j# W" y! w5 u/ g  ]
  312. }% N1 c; p8 D1 |
  313.   m. H9 C4 w7 o7 M) P9 G
  314. .chart .bar.lightGray-face .face {+ _% L- B+ H6 e. G
  315.   background-color: rgba(145, 145, 145, 0.2);
    6 v9 [0 i' ~5 A% u- V
  316. }; C% O2 |8 C4 p5 ^) r2 l

  317. ; A6 `1 ?, x) l4 Z* k
  318. .bar-0 .growing-bar {: q; H0 G' ^9 U9 E
  319.   width: 0%;6 ~7 {0 O7 Q) Z5 j- d) C
  320. }- z3 R9 s$ W7 }- y* X2 L6 ?( L

  321. 3 g% ^2 n! R' D& n  J+ _
  322. .bar-1 .growing-bar {' ^- h( k' J- K8 T( n9 E0 J
  323.   width: 1%;0 @9 F  R+ }# u! }& @/ n; ]& H: H
  324. }+ s0 U$ d' I* ?$ L" |

  325. 4 B5 c; w# o# H; J8 L$ ^/ b* b
  326. .bar-2 .growing-bar {1 P$ N  x- C* U) Z
  327.   width: 2%;) C0 W. i( U2 ^6 X+ @6 d: t( ?
  328. }
    ; P  s6 g7 B3 @

  329. ; q. P0 M9 p4 A, G9 M+ |
  330. .bar-3 .growing-bar {
    8 L* N3 z0 t0 D" B7 H: C
  331.   width: 3%;5 `% `  c9 P- Q! [* r! [( P& T5 e
  332. }
    , v7 m1 S8 _& o- ], E

  333.   B; p4 d6 s& R
  334. .bar-4 .growing-bar {. C; C* J" h- m5 P. ?- n
  335.   width: 4%;$ w: m7 I+ F3 L& H% T
  336. }
    / z) z1 _1 l" B- {
  337. 5 W3 _; j+ E, U& M, q9 Y( r; H
  338. .bar-5 .growing-bar {# v1 j/ n" Y, M3 ^/ [
  339.   width: 5%;5 ?0 B0 V; ~7 }5 ?- v5 e
  340. }- b2 t% G- j5 |8 [1 [6 t
  341. % p9 \- `( z5 D8 X! ^3 c+ {. }; |
  342. .bar-6 .growing-bar {- W  k0 C8 x) E. W' |
  343.   width: 6%;
    * O  w2 }; i1 `- Q# ]
  344. }& L( m9 C( G* \% j& B# D/ a
  345. ( r, [/ R( P/ t" ?1 V4 O9 O: I
  346. .bar-7 .growing-bar {. z- |0 A) H. q( k
  347.   width: 7%;* b9 U1 P! p. V" N
  348. }
    * z. J; f, k$ }

  349. $ v0 b: j$ k% j' ^
  350. .bar-8 .growing-bar {
    * v+ n% ?% D6 `: z
  351.   width: 8%;
    $ r: G" R4 R" m3 C
  352. }! L' g3 V: ?( I8 W% N3 C: i5 e

  353. / ]8 u9 r! a5 I, n: t  b! Q. }9 ], Q
  354. .bar-9 .growing-bar {# Z* r+ M- O4 d9 \; F# o
  355.   width: 9%;# j' b5 r; b' w( D
  356. }- m1 Q5 N4 I) z% |0 y

  357. 8 U7 ?  {( g; F# R
  358. .bar-10 .growing-bar {; b" c, M. v# ?  s. G$ M2 k
  359.   width: 10%;. n8 L' \, W; u. T' h- Y) G) B
  360. }% S. ~. }) f" S2 L; g
  361. % I& i/ A, C, r) v2 v' P
  362. .bar-11 .growing-bar {
    6 c. {; Q" _9 Y8 C
  363.   width: 11%;
    , A  w' K4 W( P% v
  364. }$ H9 @/ j# a1 D! I" i+ K

  365. $ }; |! @+ J2 \9 D& a0 B) f
  366. .bar-12 .growing-bar {
    9 P4 b' |8 K0 w: H- T1 i( M
  367.   width: 12%;7 E- j. R( |- j7 h
  368. }/ m: ]1 n* b6 G6 u- n, \

  369. 9 @1 G  @  q$ k6 J2 b* K
  370. .bar-13 .growing-bar {+ c" b3 I9 ~& p4 |+ ?
  371.   width: 13%;
    & E9 L) B) k; ^9 o2 N9 Q, e
  372. }
    : ^; ~& I1 p) c; `

  373. % }& z7 }) \5 Q3 a4 K
  374. .bar-14 .growing-bar {. j: s0 [  b% L$ D4 \
  375.   width: 14%;" [$ t/ G+ e9 \+ l
  376. }: d$ G, |2 W8 x. I/ T

  377. $ Y$ ~+ R. ^1 Z- _
  378. .bar-15 .growing-bar {* b7 }% h* H5 V3 y# I+ M* ]
  379.   width: 15%;5 T% n/ r/ Z. a/ s4 i7 O8 O
  380. }2 Q0 |* Z" b  A/ J7 H& o# o# \

  381. / J5 }# H+ b# e
  382. .bar-16 .growing-bar {
    $ z7 b. J; ^$ e
  383.   width: 16%;
    - [+ ~& z, {3 J! Y, u
  384. }
    . h: T7 d0 w' b
  385. 9 t/ p8 d' }& V+ G7 G9 x- {$ U
  386. .bar-17 .growing-bar {
    2 g% s9 ]. q, Y3 U& x
  387.   width: 17%;
    / d% i* Y7 q  I' R
  388. }$ t% s  @( z0 H( r# u

  389. 4 v( s2 [+ f% U  Q- K
  390. .bar-18 .growing-bar {
    . I: j( x! u; _2 E7 ~( n; m
  391.   width: 18%;
    / A/ I) z, q& g6 V
  392. }
    / Y% w4 b- }& @, m

  393. 0 t1 R7 J7 {: R! O
  394. .bar-19 .growing-bar {% y# c* m! R3 m' g: O
  395.   width: 19%;7 L8 e  a( T8 c$ P# ~0 X, a
  396. }  k6 p% h* _- x& v* k

  397. , ]1 |2 ^. E/ u9 H" L% _
  398. .bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
    9 d8 o& m9 h5 a2 C( I8 U$ w2 {
  399.   width: 20%;, L" M" @% k2 l8 k! ^
  400. }
    4 `9 l: M* f/ m

  401. ( n* C) p! G) `3 r
  402. .bar-21 .growing-bar {" V7 X% k* T7 }, V: b  z
  403.   width: 21%;7 G7 z! i) ]! {* j) d  _0 n( Y# n
  404. }4 w5 y1 R; N6 G; P2 b

  405. 8 o6 k# U  m7 e+ |0 ^
  406. .bar-22 .growing-bar {
    ( ^5 G1 [; x  t! u' E% t3 h
  407.   width: 22%;+ e+ ?9 q7 a1 b5 A$ z8 _
  408. }
    & @( o7 @* Q" a
  409. 7 D) \2 D* C+ M) @6 l
  410. .bar-23 .growing-bar {$ A: t( Z' L' U) O
  411.   width: 23%;
    9 m+ N' r1 h1 y* f4 u
  412. }
    0 I# k5 h( Y/ I, ]0 t1 S% u& z5 t
  413. * U- q7 H5 x4 A0 _6 b  Y
  414. .bar-24 .growing-bar {
    + H9 {1 A0 ~/ @9 H
  415.   width: 24%;
    - f* M0 ~- k- \9 t8 `! o
  416. }# \1 }- }1 A8 b0 R9 \  _

  417. 5 o3 G' X% g7 \6 A0 |
  418. .bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
    8 i2 _* V0 b) S$ T
  419.   width: 25%;
    $ M3 q- h$ s+ k; I
  420. }$ y; N( b' [* a- h: {9 q0 _& P
  421. 2 F1 x8 C, ]2 Z/ y/ p: N
  422. .bar-26 .growing-bar {4 Z6 W6 J+ R* W  X* R* B
  423.   width: 26%;6 s, E9 T7 {# \) w
  424. }, [1 s0 d" i7 X/ ?5 |& v
  425. ' S2 `5 O1 |1 v, q# }3 y# V
  426. .bar-27 .growing-bar {
    7 [0 @) `/ ?7 k" ^9 N" M) W9 z
  427.   width: 27%;7 A2 a1 R/ A" S
  428. }
    : G) J6 ~5 x1 W2 X! Z5 V
  429. ! \% [8 v* i$ E7 }
  430. .bar-28 .growing-bar {
    7 W' o( j8 P0 O8 u0 F2 H) R
  431.   width: 28%;
    , S1 [% h' t1 u
  432. }0 z- h& S9 j+ ?4 s" }- I
  433. 1 f4 X5 l9 ?2 a, |$ Z3 u
  434. .bar-29 .growing-bar {, o& N. U; u9 G8 R- [& a
  435.   width: 29%;
    " P. ~, t# V+ s; ~
  436. }  j% U/ W0 h8 o% L3 J
  437. ( b8 F/ Z" ^, ?/ q* |* l0 A
  438. .bar-30 .growing-bar {
    , j4 e% \9 d. m/ C2 Q+ O
  439.   width: 30%;2 \, i/ ^0 V0 ]& y- Q' y
  440. }- M" l; `4 E8 I# _

  441. # w; \4 ?( K" K5 L, R6 S* ~
  442. .bar-31 .growing-bar {' N. `0 C; ]2 d6 T$ I$ d
  443.   width: 31%;) C: ?- D3 \, Q0 X+ C' S
  444. }. c9 }# P' Q0 H9 h, H
  445. & _$ l3 S8 h6 o1 e
  446. .bar-32 .growing-bar {" v4 k+ v# c! i0 r+ l
  447.   width: 32%;% y7 d) A/ d# D% N. p  x
  448. }
    : W9 Q" n/ N2 g) n) T

  449. " K) o* X+ O1 H+ @- O# v
  450. .bar-33 .growing-bar {6 Y$ S8 x9 }: |2 Q$ z1 X
  451.   width: 33%;
    - e" o2 N/ I8 I# c1 ^- R% V
  452. }: Z3 ~, U( F* o" z. g

  453. 3 `! q+ v/ K) a2 R5 ^- I
  454. .bar-34 .growing-bar {
    % h( Q. r) f& R. z4 l
  455.   width: 34%;! r& \- v& d0 m8 a4 R! y
  456. }
    & n3 D  F1 V; d
  457. & w  e; R1 h& g
  458. .bar-35 .growing-bar {8 i! D4 h" f7 J3 Z/ I0 W8 Q1 B6 q: g
  459.   width: 35%;* {% ^! L  a3 B* y: x
  460. }$ E! |+ V( _& z) j% J- Y

  461. + x8 N4 ^9 O# y, `/ ]& ^) }% b
  462. .bar-36 .growing-bar {8 M# B- L& I- M& s. b7 I3 M
  463.   width: 36%;
    1 l: b4 m1 \' D" g  q" c3 X" G- |! `3 `
  464. }
    - [9 A, Y. R, I! M4 D

  465. 1 {/ d2 ~' |4 l/ s9 M
  466. .bar-37 .growing-bar {  L! V" m( R% t
  467.   width: 37%;
    * E9 ?% m5 L* I4 u; g% z9 Q5 a( n
  468. }1 g/ L( ?! s/ R3 D
  469. 9 |: e9 t9 ^1 E0 ]
  470. .bar-38 .growing-bar {
    & p& ]2 C( c: H* p5 J7 c
  471.   width: 38%;
    6 \* n4 h8 i5 k- |
  472. }6 S* O! C* F; V" `3 U" r( i

  473. ; {' h3 O7 Y7 W8 T9 r
  474. .bar-39 .growing-bar {) G! o& {9 y: N0 G3 M" f- l9 Y$ P
  475.   width: 39%;
    8 I( m9 S* L, U$ S# C5 C
  476. }
    # w' \2 S9 v6 u  B+ H- w, A# G4 Y2 I

  477. + \. F# M; O3 H. }) u
  478. .bar-40 .growing-bar {6 k1 ]) o3 M' D" J" a
  479.   width: 40%;6 q. T) B9 C. {  E9 v: Y4 w
  480. }. ]7 _+ Z; N) G- v8 f! ~

  481. ( X5 J% v: ~7 w% O, b! t* G+ u2 u
  482. .bar-41 .growing-bar {2 h; j% y: w- f- u' F' ?' p7 P
  483.   width: 41%;
    5 s( x. t" |' U) ^
  484. }
    : \7 `" Z; H3 }  M
  485. 2 J5 s7 W* P! J
  486. .bar-42 .growing-bar {  d0 v& R4 ]1 Y$ g7 K" B+ u
  487.   width: 42%;
    7 e  q" T- `4 E
  488. }
    4 s' W# L5 h1 n7 ^1 G

  489. ( b+ m( L: Y: m% \
  490. .bar-43 .growing-bar {. |: j! x$ m3 Q% ~/ Z
  491.   width: 43%;
    3 p% `  Q8 |$ D& h
  492. }
    5 |/ W7 Y% b7 i# T
  493. 4 L" L+ h" b$ L8 l' _
  494. .bar-44 .growing-bar {1 b, b/ O! [7 r2 u9 i$ T
  495.   width: 44%;
    / ^* y5 P# ]$ R1 z) f4 `% p
  496. }
    & u$ p' A1 S: h/ W8 e

  497. 3 y/ g3 _# _1 `2 ?% |
  498. .bar-45 .growing-bar {8 H, m/ ?5 r/ |6 A2 g3 D
  499.   width: 45%;
    * {  s. E( s' F; m* J5 y# c  g
  500. }
    1 I4 r) Q2 H; b0 e& v  I+ i
  501. 2 f4 R2 ^5 }$ A* G1 u' l
  502. .bar-46 .growing-bar {" R4 a8 D) y$ o7 ^" c/ x) k
  503.   width: 46%;
    - M0 S9 S/ n  V$ U4 ]6 B3 y
  504. }
    8 Y3 }& M3 [  P0 W. _+ s& A" }
  505.   g2 d4 f( a/ Q1 S2 q( e
  506. .bar-47 .growing-bar {- e+ K# f: |5 ~4 |
  507.   width: 47%;
    ' X+ ^, c) T" B2 T1 F
  508. }: U; o" i9 q1 F, |  H# ?  t9 H4 y
  509. # P* I: i6 d$ \: a8 ~$ n" F
  510. .bar-48 .growing-bar {& X9 |6 z3 Q) O* m3 g4 B, w3 s
  511.   width: 48%;- z& e2 f2 e; F  x# B4 \
  512. }
    - [4 Z3 E/ p6 B6 m: t: [
  513. / @# @) n: x# R& _3 s$ O
  514. .bar-49 .growing-bar {
    7 `  T  m- i$ s2 L
  515.   width: 49%;
    9 Z) m1 W& s+ }3 ~) Z
  516. }
    , n) \/ w- J4 K0 F) m, n- G! l1 `4 P

  517. 9 h" M5 P6 w5 {7 K- w( L6 [- i
  518. .bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {6 j* A/ M1 t+ [2 d) ^- }3 \. _
  519.   width: 50%;
    ! z5 [( z2 ]8 n% e- e0 H* J
  520. }
    ; b9 z- g+ S) J, n: A

  521. 5 V: v; L4 \- l( u! F. ^+ i$ e  A
  522. .bar-51 .growing-bar {- f& J$ O' R* X5 M/ A
  523.   width: 51%;
    ' f0 Q& o: {6 u  o
  524. }" L9 d' ]# S# T
  525. 6 v! i) Z" F" `/ y$ b$ [
  526. .bar-52 .growing-bar {
    / W; [) O& I* s1 v
  527.   width: 52%;3 z, P$ L: E1 d7 l
  528. }
    % o, O- ]$ W9 M) z  V5 }5 L) b
  529. 4 m+ y5 Y; m* @% f/ _6 b
  530. .bar-53 .growing-bar {
    . c6 s6 E5 {# k" X$ J) v
  531.   width: 53%;
    : Z4 m. J: P9 j% S6 I3 c
  532. }
    9 d/ j& ~+ I% m: T2 h2 l; e
  533. * V& }9 p  E( t+ M1 V- D
  534. .bar-54 .growing-bar {
      n8 ]' T' `. @5 R
  535.   width: 54%;
      w. b' Q" u5 w) _$ B6 b
  536. }
    8 G: l$ P9 Z/ {! }& ]
  537. / Y) e% X$ v0 |6 ]1 K. ~+ C, Y* f
  538. .bar-55 .growing-bar {
    ( U. v- r( a) x( g* ]
  539.   width: 55%;
    2 \5 n1 w, Q/ I; o# @
  540. }
    5 e7 w) t- z! t1 }

  541. ) d: B$ P, W0 ~) P1 V* i
  542. .bar-56 .growing-bar {
    " x% B2 C; x" I; ?
  543.   width: 56%;1 P  c2 y- P6 c$ l: r/ x7 q) t
  544. }
    ! B! M4 I4 P) K
  545. 8 U# x: o( Y* c, B, ]; q. |
  546. .bar-57 .growing-bar {
    ; M$ w$ Y( i4 t
  547.   width: 57%;
    & e2 @+ {; s  i8 A, N
  548. }
    ! W* {1 o+ O2 L# F

  549. 9 w& \3 q6 B" @, S& j  e
  550. .bar-58 .growing-bar {& _5 ?' @5 @5 b1 ^
  551.   width: 58%;  e; ^6 T, S# E
  552. }* B  ~: w: y& p; M5 }

  553. ; [4 F- D0 w' H- J, y
  554. .bar-59 .growing-bar {
    ) n( W0 B" ]( c0 C
  555.   width: 59%;
    / F" L( N( ?! A2 l
  556. }6 x9 U: d8 y9 ]

  557. 0 V8 \7 ?  L) J5 K; ^
  558. .bar-60 .growing-bar {% ~, T( m- R6 n- a$ L
  559.   width: 60%;
    9 M5 O$ [# d& Q! q
  560. }6 s4 Q# r7 Z. k
  561. 8 W9 t2 i' r9 |: e. {9 p
  562. .bar-61 .growing-bar {8 s5 f1 t( z4 P; Z6 x4 D( _
  563.   width: 61%;
    4 A3 ^- o( j0 ^3 _8 s
  564. }/ C5 A: ]( }, ]; Q- ]( ?+ H
  565. + A3 @5 v3 {1 ^. z9 i
  566. .bar-62 .growing-bar {) W9 R* A, y2 h: ?1 w
  567.   width: 62%;
    5 z7 q8 \% a/ K% S1 @" P: z
  568. }
    * ^% r. s( H5 L, B5 I
  569. 0 s# ^6 e: Y" C$ F7 t; W% i
  570. .bar-63 .growing-bar {
    3 `0 S0 F2 C1 ~* k5 r4 C: t2 Q' f
  571.   width: 63%;5 {4 G0 T1 B7 s: d+ W
  572. }
    6 P$ I6 ?) b0 x) \
  573. 9 ^* ]; O0 d3 W
  574. .bar-64 .growing-bar {( F  X$ i: A/ U, Y( U4 {1 o
  575.   width: 64%;* @5 D: J* H# L9 G8 D6 X7 C
  576. }% K3 Q# d% B( F' l# ]
  577. 5 X/ _9 H! F+ r6 j$ I/ W3 F
  578. .bar-65 .growing-bar {' z" N9 g* m* x) y. _
  579.   width: 65%;
    ! j7 l: C; D( @, k  ~
  580. }7 o+ ?( c2 Z/ b2 d& ~2 B0 A' K
  581. , |' Q3 y% l9 D
  582. .bar-66 .growing-bar {4 e& s5 M( H$ x; k8 a
  583.   width: 66%;3 w' x- c' u; x' H
  584. }
    , a# t; Y- U1 n+ t* \& O( W$ j

  585. ! W; |* _# A3 h9 n' p
  586. .bar-67 .growing-bar {& u9 S( J3 x: `: \0 A& p
  587.   width: 67%;* K- O; k  |  B0 d" Z1 y  E8 Q3 B
  588. }( N  g  R# E3 }* N5 Z
  589.   E. E* R7 x% M9 d) e
  590. .bar-68 .growing-bar {
    + u+ W7 W0 R, t' ~% d6 q
  591.   width: 68%;
    # F5 a$ Q; v; `* {: K# V
  592. }
    # G. k; u& F, I) t$ {# B! O" M: J
  593. 9 H1 e2 B% Y; h7 n
  594. .bar-69 .growing-bar {
    " K: L1 _- |5 f
  595.   width: 69%;
    ) D6 @5 m" v% D5 I
  596. }
    ; m9 H5 R( R, m1 b
  597. 3 j4 Y8 ^% g- ?% _9 N
  598. .bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
    ! q7 d, o- g9 T7 O, p
  599.   width: 70%;
    % U/ s) ?% U0 c% T% Y
  600. }
    % ?) ?( Z3 r7 P- B+ B1 g

  601. + x" J: h8 F$ {/ a/ [3 e
  602. .bar-71 .growing-bar {7 l+ G! _1 l, Q# i
  603.   width: 71%;
    5 N4 |( R* x0 f" g0 G
  604. }4 _* L5 T6 Z9 R! ^
  605. " M5 K; I' t7 @2 V+ L
  606. .bar-72 .growing-bar {
    : W: l: y0 k) Z# W1 F- ~+ A6 X/ M
  607.   width: 72%;" c: i2 k: D- O& i" H% z2 [
  608. }
    9 K1 |0 E& Z: ?9 r8 [
  609. ) m) u, t1 g9 z
  610. .bar-73 .growing-bar {
    ) m+ D5 S! Z. Q% |5 n( p% h$ D
  611.   width: 73%;
    4 b6 x5 n5 {5 f7 c2 O' a
  612. }5 h* g8 H: z* T

  613. 0 i* g; i- W$ `: t) b2 R2 a* `
  614. .bar-74 .growing-bar {
    + ^3 V/ S; T; |6 e4 F$ F, |
  615.   width: 74%;4 z( g% q, _0 B6 H8 }8 f; ~
  616. }
    3 I: i5 j& l6 e) o7 C

  617. ' D8 A6 r2 |* x! D
  618. .bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {, M8 u; W2 e6 I! x
  619.   width: 75%;
    $ s" q9 h, Z3 D1 F( b; n
  620. }* M7 }+ c& F- f
  621. : c6 N8 a% U" O" p* v) D
  622. .bar-76 .growing-bar {
    : @! V: Q! i2 b, F8 q9 Q- H  d
  623.   width: 76%;" D5 E: @* W( F- P
  624. }
    5 D  e$ L& B% M0 ]

  625. 8 F' ~. r7 n0 K
  626. .bar-77 .growing-bar {$ f+ @. k* U3 m/ Q0 O
  627.   width: 77%;
    ) d  i6 y! `% u" _7 {* h1 z5 i
  628. }
    5 f1 r5 n: C- T& g+ V0 q
  629. * ~' g' Q( w5 L' m
  630. .bar-78 .growing-bar {$ T/ ?0 C1 g, G
  631.   width: 78%;
    : s0 d2 N+ R; r& ^% x; D& q
  632. }
    # k4 G- R' D9 ]0 C' e( h

  633.   [$ C* O9 g! _0 O1 v- B( s
  634. .bar-79 .growing-bar {6 s2 `( i* C2 V0 H
  635.   width: 79%;# E" y8 }3 U. W  q
  636. }$ j* W4 u& _$ D* i

  637. - c, ?+ E& Q/ B, W4 X
  638. .bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
    9 z0 b* A3 O: H0 D. \* j7 Z
  639.   width: 80%;3 h: n- P: s- Y& T) s+ u* X  ]  R
  640. }* u& q4 L6 C( J6 h8 U* @* _/ Z
  641. / z8 h. Q. f' j/ B
  642. .bar-81 .growing-bar {
    " Y! C$ i+ m$ B7 G7 p, b3 h
  643.   width: 81%;
    ! Q/ e. j/ l6 Q( I! y
  644. }
    : H, Z$ ^: {! k7 ^/ i

  645. ( X! i2 r' }3 ^7 _
  646. .bar-82 .growing-bar {# ~9 x& Y9 K5 h& \4 Q, Z
  647.   width: 82%;9 l5 m' `0 l' S( K5 o  F  g
  648. }* d% t- a+ ^7 ]' [: M( v
  649. 3 S. C5 g9 t0 }# a& O( O  p
  650. .bar-83 .growing-bar {& n% Z! K! [5 l& V* ]4 j
  651.   width: 83%;
    ; j6 a! O8 F6 g8 {% |; Y% l+ t, h
  652. }
    ) i# J! d( {8 o- G  _
  653. $ o9 p/ N6 x0 G7 H
  654. .bar-84 .growing-bar {
    : A+ Y' |4 p. ^( G# e
  655.   width: 84%;  G* k- k/ ]8 C# @! Y0 Y9 C" E
  656. }- \  E0 g" q! C! w$ n

  657.   g: f  H3 B% T% {6 q
  658. .bar-85 .growing-bar {; l/ R! p. r& F: r1 O
  659.   width: 85%;
    ) u; [% @: h2 j& _' j. w
  660. }( [' N$ C2 `( C# T7 Z, d
  661. 0 }# h# g8 x" X& Z. X: m
  662. .bar-86 .growing-bar {
    $ D  Q* Y% m7 j8 _+ u0 y
  663.   width: 86%;
    : ]0 F% V" O+ E1 E4 [& V
  664. }1 z7 O! t  l) C! W. v' ^, q9 k+ g
  665. 5 E0 o6 x5 V8 e, F8 N5 x% W# P( O
  666. .bar-87 .growing-bar {3 V* L6 y1 |$ X+ [
  667.   width: 87%;% M# G) F9 t4 c$ Y& G" r
  668. }5 T" T7 `1 Y9 I. [7 b$ g
  669. 2 _: v( Z* T' o
  670. .bar-88 .growing-bar {- C2 j6 Y7 A1 G, b/ }6 B9 ~5 y
  671.   width: 88%;' j; T. B* ]4 j2 r% r. [
  672. }' Z6 @* p8 u; }# {' R% H
  673. * ^5 h  Q$ k" {1 ?! m
  674. .bar-89 .growing-bar {
    3 k. `7 G# s  D" z! \; ^
  675.   width: 89%;
    8 i$ X* _; h( C; u, P& l) O, }
  676. }7 ~; r, j. j1 t# {! F5 x! M
  677. ) F+ c4 G  t2 s2 I
  678. .bar-90 .growing-bar {- \" ?) G' Z, ]! Z1 P$ P/ y
  679.   width: 90%;, v$ i' m0 ]5 E  w6 c' }" W9 {: c
  680. }
    ' E1 i4 V/ Q% {$ n
  681. # U/ L8 l0 g9 n( m  G
  682. .bar-91 .growing-bar {: K8 f* A9 b+ \. l/ f& z9 K
  683.   width: 91%;6 Z# {5 H) ]& `4 G2 ^% W4 p, {
  684. }
    ; k2 `2 `6 f8 d: P# t$ D
  685.   T% J( F" W& w7 b
  686. .bar-92 .growing-bar {8 _; \2 X& A5 f0 l
  687.   width: 92%;/ |: l) m( Y- C. e. j7 X$ Y8 O- |
  688. }
    6 B5 c0 t: p" J! J+ x

  689. 2 R2 e! R7 J: s% k8 k$ w2 j
  690. .bar-93 .growing-bar {
    * a8 x" v$ n; |* Y, I
  691.   width: 93%;
    ! Y( @5 P8 E% i3 _% F# ?3 g
  692. }" E1 `+ [: C& _; F$ t
  693. 1 `8 \# q% I& Z6 [& [) t
  694. .bar-94 .growing-bar {
    3 M) d5 W  K% }, E5 Q
  695.   width: 94%;
    ) H/ W* r$ h3 U/ d: ?4 O
  696. }
    % r5 ~7 {. ]0 b* ~# x- F2 r8 R
  697. 8 g9 j+ C; @: t  k. R
  698. .bar-95 .growing-bar {
      j" S5 }4 O% f  g% M
  699.   width: 95%;2 S$ W4 ^9 j, _8 w+ q) P  u# Z
  700. }% p% B& p! D9 m3 e' w
  701. 7 h0 r6 l/ R5 o+ W6 Y
  702. .bar-96 .growing-bar {. k9 O: {0 S8 R1 b0 y& t- \
  703.   width: 96%;
    9 e4 s" o2 V' m1 R- F
  704. }
    ) s2 G! D$ y8 u5 s( E
  705. - b1 g  R& J1 C  i- s! _
  706. .bar-97 .growing-bar {  ]8 |0 R! C# D$ x3 L
  707.   width: 97%;
    6 ~: X6 N: @  G' ]4 b
  708. }
    - d. r7 S8 U5 A1 B

  709. ( v' T" z7 F+ l/ |2 v
  710. .bar-98 .growing-bar {3 G" @1 e! [# R( {1 U
  711.   width: 98%;/ D; W  d, E! C6 `/ M
  712. }7 k! u  Z7 }! T' h' s" ^9 F/ S

  713.   O2 r1 q' p% O9 f5 T) X, ?0 W9 G2 R/ V; I
  714. .bar-99 .growing-bar {
    + m. i" `4 w% m6 l' R
  715.   width: 99%;
    & {3 _5 G# W  x) y/ q: x
  716. }
    , g. L2 q% O& O# p, s. N

  717. 3 O  A+ t8 \# V
  718. .bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {+ r9 t# d& k1 S6 w$ E; u- V$ F9 G9 ~# K
  719.   width: 100%;
    ! {4 k- w% K* x" _* P4 \  e
  720. }- A/ a) A& S# s0 W  d

  721. ! D2 }# ]! o3 E4 D
  722. /*
    $ m8 N* }8 m5 j& c
  723. END // CHART'S RULES  ~, S. m$ W' s- j1 Z
  724. *, ~3 d) q8 @: U
  725. *
    , t" i8 x& U2 C7 `
  726. */
    # L; E8 e9 N! w# m3 Q1 z
  727. .chart.grid {
    + _( e1 t$ g, ^" F; b
  728.   display: flex;
    2 u$ p3 e8 B  o: N0 H
  729.   flex-direction: row;- Q( S7 u' d3 h5 H0 n# T
  730. }
    4 }0 P; ?) q8 M6 T0 M
  731. .chart.grid .exercise {
    6 x$ ^. Y# P6 o4 x
  732.   flex: 0 0 100%;* e8 V- j  i7 d1 S
  733.   display: flex;
    + n' ]: B- a5 \: i$ {, S
  734. }
    2 S# I: t# M9 E1 }. p9 Q
  735. .chart.grid .exercise .bar {, N! A, ?: J4 n5 D0 ?. q# f! c
  736.   flex: 1;
    % J& ]6 Q: C6 Q3 D2 @
  737.   margin: 0 .5em;: T7 ^5 j/ L* S/ |
  738. }! m, g$ l0 |/ i- N2 _
  739. .chart.grid .exercise .bar:nth-child(2) {
    5 T' D/ W2 A& [+ @
  740.   z-index: 8;
    + w  D4 n# o2 N, U1 i* T- ], ^4 w* B
  741.   flex: 1 0 40%;* Y5 o0 B- F) C: Q" q
  742. }4 y/ G  {' Z7 B6 J. q- y5 a0 `
  743. .chart.grid .exercise .bar:first-child {
    ! }& S2 O& _2 h
  744.   z-index: 10;
    % \6 T, o9 n; ]5 U& k8 e$ l" o
  745.   margin-left: 0;: {: }9 U# k4 J" L7 j) D8 `
  746. }6 V4 O, {8 b. a3 w" a( W' L! H
  747. .chart.grid .exercise .bar:last-child {
    + F3 a9 F& j1 |
  748.   margin-right: 0;, I' b% j3 K  `4 {: T
  749. }
    7 m: ]# b3 @1 l$ U& j
  750. ; p; b+ \, |8 G' r1 z
  751. .actions {
    . o* f, L# C4 Y! O) q' \; {
  752.   display: flex;+ J1 `% f$ T7 S' F  ]
  753.   justify-content: center;
      c1 {' e) F; y  H/ y4 k
  754.   margin-bottom: 0;
    % W" w; ~$ P9 e3 D  F1 y
  755.   padding-bottom: 2em;# g0 J! q" {5 r4 o
  756.   border-bottom: 1px dotted rgba(68, 68, 68, 0.4);0 B, |6 v5 g% M
  757. }
    9 i) W+ ]$ @* `! L9 L$ b
  758. % u9 u4 s  _, x. g* A
  759. label {1 g- s2 A6 Y9 h( R, \& j4 C
  760.   box-sizing: border-box;
    1 p& h' |- c3 a3 T5 g. @
  761.   padding: 1em;; ^" Z, `: B  K
  762.   margin: 0 .2em;
    + ^, ?4 ]# R2 L/ U4 b  r" _
  763.   cursor: pointer;
    * \6 }+ G3 [: O$ H2 c: P# ^
  764.   transition: all .15s ease-in-out;
      J/ G' Q2 J1 t! W) M* k5 Z$ E0 S: H$ c; _
  765.   color: #0a4069;8 _- [7 l8 {! Z
  766.   border: 1px solid rgba(254, 254, 254, 0.6);
    : U5 u2 J* m- k, C8 m
  767.   border-radius: 0;
    , M; m' g' q& Z5 g3 M) S% _' e
  768.   flex: 1;
    ! N/ O/ d) e% T
  769. }
    + N1 h  O! ^7 Q
  770. label:first-child {. g/ ^6 C9 p2 U
  771.   margin-left: 0;: J* c" S- m2 a/ J
  772.   border-radius: .2em 0 0 .2em;
    : m; H) E5 H- {5 Z. l% E
  773. }) h9 f& Y3 N' s5 N
  774. label:last-child {2 r' o+ r% t: ~( `- r9 r' S
  775.   margin-right: 0;
    0 y2 z. w' e3 Z- g
  776.   border-radius: 0 .2em .2em 0;8 @& a; G" b1 u
  777. }! C# D5 {' Z; V! ~0 Y% Z$ A9 L" \5 X
  778. 9 P: R5 b. }) b9 q/ S' P# I
  779. input[id='exercise-1']:checked ~ .actions label[for='exercise-1'],/ P" _4 w, o* i- i4 y$ ~0 ^7 e
  780. input[id='exercise-2']:checked ~ .actions label[for='exercise-2'],/ ~( `" F2 |6 i2 S4 q# s+ u' Q1 e
  781. input[id='exercise-3']:checked ~ .actions label[for='exercise-3'],
    4 ~2 h2 _# E  ?2 |( `
  782. input[id='exercise-4']:checked ~ .actions label[for='exercise-4'],7 o1 d9 q7 S. [, L" B8 K
  783. input[id='pos-0']:checked ~ .actions label[for='pos-0'],* X1 ]" b$ E7 h# \. p: c
  784. input[id='pos-1']:checked ~ .actions label[for='pos-1'],+ P7 H& q  K8 B, i, R1 D6 u9 W3 u+ f
  785. input[id='pos-2']:checked ~ .actions label[for='pos-2'],
    , x; }0 F3 W7 U
  786. input[id='pos-3']:checked ~ .actions label[for='pos-3'],9 C. [% T# s3 q! w) F# s% j% r. j
  787. input[id='red']:checked ~ .actions label[for='red'],
    ! T0 X. Z# ^( x8 K" e
  788. input[id='cyan']:checked ~ .actions label[for='cyan'],
    8 z  W- Q& a& I9 }
  789. input[id='lime']:checked ~ .actions label[for='lime'] {
    1 L: X& C9 m5 o) p  C. e; [) U
  790.   color: #76c900;" ?, R! x2 T2 _% J
  791.   border: 1px solid #031523;) t! C, d9 A: L- X
  792.   background-color: #0a4069;% O. e7 p8 c0 c6 F
  793. }
    9 A9 \! N- K5 g* M* N' Q! V

  794. ! X7 j( u" B  T
  795. input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) {3 H9 f. w2 C. G+ N9 d  v# {  b" r
  796.   flex: 1 0 0%;
    7 Q6 f% q! c- d; q! Z1 I
  797. }
    8 Q, v4 e* r  y0 I$ i
  798. input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) {' y/ w0 R' Y. a* p9 r  `8 v" n% k
  799.   flex: 1;
    : }, h0 d/ n$ O9 I+ z
  800. }
    5 c. m" W' g0 s* L- k' ?8 V
  801. input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) {) f. x+ {' g9 u3 V4 m) o& Z/ W
  802.   flex: 1 0 30%;& A+ r; D: _3 N
  803. }
    1 n2 t3 n' m6 K  h+ C$ Y$ g1 D# v
  804. 6 o& H, @. R. q6 k/ A
  805. input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
    . F. ?# O0 n( z" R5 P2 i7 l
  806.   flex: 1;
    : w' k5 p8 v' l% O- P
  807. }
    / h2 ^' J% d2 o3 x- f7 r4 S

  808. 5 z5 ]+ A  X4 A5 F# U
  809. input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
    0 s6 C$ U) c, q; p: u- I
  810.   flex: 1 0 30%;1 p7 m: s6 y8 `2 g% S  p
  811. }% I  k4 j6 {" c& [1 r
  812. input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) {4 U5 l9 ^3 g) t% l. V8 F( |
  813.   flex: 1;
    ' o5 R( S: _: F2 B) V
  814. }6 n5 d  [& Y& W: O" _  @2 R" v) Q! H
  815. </style>2 |3 c$ O, K: R" U- g# l8 ]: d( _
  816. 3 h9 P! u! i9 Y
  817.   <script>
    3 I% v" T! Z! d
  818.   window.console = window.console || function(t) {};
    , p9 S! V2 k1 K# W& t6 w' r' W
  819. </script>
    % @+ c# N: N8 I& Z& X' g: t
  820. : Y1 L6 D9 i0 \/ s& Q1 o+ ^
  821.   7 o, L* B7 F$ h. O, R. z
  822.   3 _5 ^- v* ~/ X$ x
  823.   <script>
    ! u: O$ ^$ s6 S! W0 d( I. z( N
  824.   if (document.location.search.match(/type=embed/gi)) {
    % a# f9 g  D: ?8 p
  825.     window.parent.postMessage("resize", "*");3 q/ ], h  {+ o2 C" G
  826.   }" M2 m8 Q, _% E7 D
  827. </script>6 d. F0 N9 ]( y

  828. , o( C- h( u' ^7 e, w
  829. 6 m: H, F2 U; J: p2 D
  830. </head>
    & @, x" T1 z; x4 q1 {

  831. # c9 W( T6 O2 K+ `3 c
  832. <body translate="no">
    : A5 p' ?/ B9 p; j8 w* C0 K
  833.   <div class="container">, X7 d" b' G- A, v( ^& g
  834.         <header>
    . R* v* N5 J" ^
  835.             <h1>Pure <strong>CSS</strong> Progress</h1>+ R. ~6 Q; _! j4 @( x
  836.             <p>... a pretty liquid progress-bar.</p>- z! W- O. `/ y& a# l
  837.         </header>
    3 w. p& m; o+ ~; x
  838.         <section>
    : \% c6 L1 u" n) e3 P4 J" G
  839.             <article>$ k: n" z& Y0 Z9 B& {
  840.                 <input type="radio" name="switch-color" id="red" checked="">' t% z# M$ K5 }$ c9 n+ ^% c' e2 c
  841.                 <input type="radio" name="switch-color" id="cyan">
    & o" ^3 t) P2 e' a' L
  842.                 <input type="radio" name="switch-color" id="lime">
    & I: {5 g+ B6 l+ }. ^6 _
  843.                 <div class="chart">- E6 j) k8 ^( G4 @- E. z
  844.                     <div class="bar bar-75 white">. G; J/ L0 N' `$ R2 q# q
  845.                         <div class="face top">
    ( l' I: @/ x0 `; O1 j! i
  846.                             <div class="growing-bar"></div>1 p* Y% E# M, {' F3 f
  847.                         </div>
    ' g9 h8 ?  }3 j0 u1 C' U
  848.                         <div class="face side-0">
    1 _5 \& r+ F( l; x+ }( V0 [
  849.                             <div class="growing-bar"></div>: c- K3 |5 y' C/ l
  850.                         </div>2 N3 H# w, m9 a0 @8 p$ t; Q* O4 B' m$ L
  851.                         <div class="face floor">7 x1 E% x$ ?! M2 E+ ~- v
  852.                             <div class="growing-bar"></div>9 o0 [4 V4 ~7 C
  853.                         </div>
    - U* D/ ^0 H/ q7 e% n( Q$ t; k
  854.                         <div class="face side-a"></div>& ~8 K0 j! x9 J8 X
  855.                         <div class="face side-b"></div>
    , F% |# U) w: |) n( C
  856.                         <div class="face side-1">
    ; ^2 Z5 J+ I- A' l& }! v
  857.                             <div class="growing-bar"></div>: I' q& I: a. N# Z, r
  858.                         </div>( E4 u! u0 B4 ~; e; z" {
  859.                     </div>4 Q& V, ^; Y- d
  860.                 </div>
    3 ]6 R7 n  F" W  c* J
  861.                 <p>Try another color :)</p>
    & |4 Z1 ^6 X& `* P# Z) p
  862.                 <nav class="actions">
    $ d# K/ W: |, W3 J2 p& f& K& I' S/ L
  863.                     <label for="red">Red</label>
    $ r- m6 q' J% k* B* @* X& G
  864.                     <label for="cyan">Cyan</label>" i6 j1 G) I0 y' l: E8 b' l7 a! H
  865.                     <label for="lime">Lime</label>
    ; k" F7 r* j% K* \' j* u
  866.                 </nav>
    & G2 A$ q9 t* `* K' b
  867.             </article>* b3 \/ B. Z( {7 u% F8 B
  868.             <article>
    / l$ j8 n3 _7 r- c# _6 R
  869.                 <input type="radio" name="switch-pos" id="pos-0">
    : v: f8 ]' z4 C+ }* e# D0 ~# [5 [
  870.                 <input type="radio" name="switch-pos" id="pos-1">
    ( _( P" o' w+ i5 d, E: E
  871.                 <input type="radio" name="switch-pos" id="pos-2" checked="">9 w& a7 w3 t$ p7 ?
  872.                 <input type="radio" name="switch-pos" id="pos-3">/ P3 F$ Z9 A( [+ Z
  873.                 <div class="chart">$ c& _! V( l) N- @/ ]9 T
  874.                     <div class="bar bar-30 white">
    , H, P5 I2 z0 n  I7 `7 f
  875.                         <div class="face top">1 |9 f1 ]$ j6 `! m1 D# \
  876.                             <div class="growing-bar"></div>
    7 q% g# ?: r8 J; }& \+ f) @( X
  877.                         </div>
    $ ~7 E* C) d2 R7 k8 o
  878.                         <div class="face side-0">* z4 h. m' J7 R/ ^! ?8 R* V- [
  879.                             <div class="growing-bar"></div>
    # |+ E- b$ x( T5 D8 ]8 d
  880.                         </div>
      q2 n/ `) l( A9 e
  881.                         <div class="face floor">4 K& X' W8 p1 G. d0 u" n
  882.                             <div class="growing-bar"></div>2 Z/ Q! C" m4 M7 [
  883.                         </div>( [5 b/ N3 z# H/ r" e3 Z9 j+ b
  884.                         <div class="face side-a"></div>
    , O  F( l: M' E  U; H
  885.                         <div class="face side-b"></div>
    ) C! o, h4 v) Z! C9 r
  886.                         <div class="face side-1">3 \: F8 K6 _  t" h
  887.                             <div class="growing-bar"></div>
    3 t! H. m5 b  c, r  t+ }
  888.                         </div>
    4 C8 c( F' j8 x! ^8 a/ K
  889.                     </div>
    3 R* k; M4 d' ~" h% z
  890.                 </div>7 D) e; r3 G7 Y3 b: g$ ?$ j
  891.                 <p>Try another position :)</p>
    3 \2 _2 S; ~' x4 |
  892.                 <nav class="actions">
    & u. ]# v" g) z7 s" V0 H: X$ B' A
  893.                     <label for="pos-0">1/4</label>
    - _5 k, X4 H( e7 Z. l3 Q. M4 D9 x
  894.                     <label for="pos-1">2/4</label>
    3 V9 q8 e1 p/ ~: l
  895.                     <label for="pos-2">3/4</label>+ e" k8 ^0 q) ~
  896.                     <label for="pos-3">Full</label>
    : C& l4 g8 g) l3 }6 c
  897.                 </nav>
    . y5 n! v4 K+ S
  898.             </article>6 A2 ~3 n. q- y1 j4 O
  899.             <article>6 J/ ~9 K9 H6 J& \! l6 ^
  900.                 <input type="radio" name="exercises" id="exercise-1" checked="">
    , S4 R* \4 R, O: D' @- E/ f
  901.                 <input type="radio" name="exercises" id="exercise-2">
    & H& t, P: h7 `/ R  k- l- b: j3 D
  902.                 <input type="radio" name="exercises" id="exercise-3">1 H$ z7 @+ ], M# i4 }2 H% w- @
  903.                 <input type="radio" name="exercises" id="exercise-4">
    % E! `+ B( {1 x6 C0 e
  904.                 <div class="chart grid">
    7 h, s+ I3 t9 K
  905.                     <div class="exercise second">
    : j" X: ^* ?. \2 Q3 U3 E5 s
  906.                         <div class="bar bar-45 navy lightGray-face">. m) g* j) A( m: D6 [$ ]& ]
  907.                             <div class="face top">5 K' g  w8 f( r6 a
  908.                                 <div class="growing-bar"></div>
    ' A+ S$ Y( Q8 s+ C9 ]
  909.                             </div>* Z$ ^* i0 _9 {% C+ ?( U5 K) H3 F
  910.                             <div class="face side-0">: C  z( U. y. @) s% Y' p+ u" I
  911.                                 <div class="growing-bar"></div>" d" z0 q, E6 K* X0 @% I
  912.                             </div>% a/ h% [7 J2 q0 y( ^* g
  913.                             <div class="face floor">
    / f* R: y1 m& x1 p4 o1 `  z
  914.                                 <div class="growing-bar"></div>
    - m/ ?0 |- p. W. @
  915.                             </div>
    * j6 ^, ~' q& g$ `" J
  916.                             <div class="face side-a"></div>. x8 {* \, X, u' k9 o
  917.                             <div class="face side-b"></div>
    ) b$ x% M- L6 g
  918.                             <div class="face side-1">; ?; V+ Y# }+ U$ P; n! Q3 ?! v
  919.                                 <div class="growing-bar"></div>7 T$ z" U3 d6 b* a
  920.                             </div>: R8 x7 S# k, G% J
  921.                         </div>, |% H. \: @8 \* a% j
  922.                         <div class="bar bar-80 yellow lightGray-face">
    ( w0 j. Y/ z. P1 T
  923.                             <div class="face top">
    + p; v( h* r' I/ s9 q
  924.                                 <div class="growing-bar"></div>2 b2 Y. d2 |2 }6 e
  925.                             </div>: O! G  C+ p: m9 p2 @/ x% I0 S  F/ _7 f
  926.                             <div class="face side-0">
    + k' y* `' I# m! A( s) E
  927.                                 <div class="growing-bar"></div>; X: Q3 N$ |" L0 Y
  928.                             </div>0 b$ U" v: U' ?& C  N; }8 M9 ?
  929.                             <div class="face floor">
      w/ d/ g# L' j8 [# [
  930.                                 <div class="growing-bar"></div>; N1 \6 L: Q! A* X
  931.                             </div>4 F" h: l$ Y8 R$ _4 r& Q1 ]
  932.                             <div class="face side-a"></div>
    ; ?0 e( j: O! Z3 _) j
  933.                             <div class="face side-b"></div>
    2 i1 ~( }. U- k, l7 S. {3 W
  934.                             <div class="face side-1">
      U! D0 L" I% o
  935.                                 <div class="growing-bar"></div>
    ( S/ ?; U, o- z9 {3 f0 A4 o5 G
  936.                             </div>0 C+ f8 G3 o" d, o5 L( M' x$ H3 N' m
  937.                         </div>
    ! P  @0 q$ F' T; U! A# ]
  938.                         <div class="bar bar-60 red lightGray-face">
    & i8 t# F$ N8 Q
  939.                             <div class="face top">
    8 V  M, @, i# c1 e) l3 i- C
  940.                                 <div class="growing-bar"></div>
    . z& ?8 s9 S' [3 C
  941.                             </div>
    7 J; K  ?/ R! }" l5 _
  942.                             <div class="face side-0">. U7 M7 ]0 K) _, F1 o$ `" s
  943.                                 <div class="growing-bar"></div>
    7 }. w% n) s$ J2 \
  944.                             </div>
    0 }! S" E7 r, ]5 Z1 l7 O, u
  945.                             <div class="face floor">. b: c8 {( z, N
  946.                                 <div class="growing-bar"></div>
    & U5 D7 u0 C5 H. x+ c
  947.                             </div>
    2 x; p0 ]2 H  z" `5 n: Z6 o
  948.                             <div class="face side-a"></div>: A' j/ l8 d  U7 ]. Y3 z
  949.                             <div class="face side-b"></div>
    ' C7 {' t5 R% s0 a
  950.                             <div class="face side-1">
    ! R' r1 {% r) ^# i, r7 c3 M
  951.                                 <div class="growing-bar"></div>
    # m, _- T2 A0 q2 k1 h
  952.                             </div>
    ' T) t7 X; G8 u7 c4 z
  953.                         </div>
    ) @. m: s, [# T8 o$ r1 m
  954.                     </div>
    5 B" O! o  G" T& ]
  955.                 </div>
    9 J* B% f! q9 I
  956.                 <p><em>It's liquid</em>, so adding a bit of code you can make charts like this :P</p>
    / ?3 s+ J; h/ V  _5 ^6 T
  957.                 <nav class="actions">
    4 b* g0 y0 Z( C, B7 E0 P' j
  958.                     <label for="exercise-1">E-1</label>
    8 ~8 r" ~$ v+ Q2 q# y$ g
  959.                     <label for="exercise-2">E-2</label>, j; b/ R( u6 `. g
  960.                     <label for="exercise-3">E-3</label>
    ( _6 Y4 N+ k: e  U. f' {
  961.                     <label for="exercise-4">E-4</label>
    - j0 I* ~5 u, L1 b
  962.                 </nav>+ Y( E. `' H7 `  u8 N* u
  963.             </article>( D" t# i/ z' X" {- Y
  964.         </section>
    ! C* t( n! H) \4 [$ [/ D% w
  965.     </div>' S5 L( I6 V4 h0 _8 P
  966.   - \$ O- Y/ m- ?9 r, t1 C: {* y
  967. </body></html>
复制代码

6 k# Y0 H3 _" U0 e2 O2 o5 S
- Z8 s( e) N" i! w) E% ]. l/ m5 d6 d8 M9 h2 u9 I& n2 l" q

帖子地址: 

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 收藏帖子 返回列表 客服中心 搜索 官方QQ群
企业
关于我们 加入我们
友情链接 媒体合作
联系我们 QQ群
官方
新浪微博 腾讯微博
百度贴吧 人人主页
脸书 推特
下载
安卓客户端下载 桌面客户端
反馈
意见建议 用户使用协议
帮助
更多
捐助本站
安卓客户端下载

安卓客户端下载

苹果端下载密码:dmwu

苹果端下载密码:dmwu

快速回复 收藏帖子 返回列表 客服中心 搜索 官方QQ群
桂ICP备2021004265号-1

Powered by Discuz! X3.4 © 2001-2013 寻宝楼论坛