From 195a65b1d4e653f7a755ba11542584cc7fddf15f Mon Sep 17 00:00:00 2001 From: Jouke Waleson Date: Sun, 24 Nov 2024 14:03:19 +0100 Subject: [PATCH] add an indeterminate progress bar Inspiration is taken from pico.css --- concrete.css | 34 +++++++++++++++++++++++++++++++++- concrete.min.css | 2 +- index.html | 3 +++ 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/concrete.css b/concrete.css index 8052af6..57b77f4 100644 --- a/concrete.css +++ b/concrete.css @@ -388,7 +388,7 @@ progress { */ progress::-webkit-progress-bar { - background-color: var(--bg); + background: none; } /** @@ -407,6 +407,38 @@ progress::-moz-progress-bar { background-color: var(--fg); } + +/** + * Set the indeterminate animation for the progress bar. + */ + +@media (prefers-reduced-motion: no-preference) { + progress:indeterminate { + background: var(--bg) linear-gradient(to right, var(--fg) 30%, var(--bg) 30%) top left/150% 150% no-repeat; + animation: progress-indeterminate 1s linear infinite; + } + progress:indeterminate[value]::-webkit-progress-value { + background-color: transparent; + } + progress:indeterminate::-moz-progress-bar { + background-color: transparent; + } +} +@media (prefers-reduced-motion: no-preference) { + [dir=rtl] progress::indeterminate { + animation-direction: reverse; + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + /** * Set the border for the horizontal rule. */ diff --git a/concrete.min.css b/concrete.min.css index 1963c60..1441a8f 100644 --- a/concrete.min.css +++ b/concrete.min.css @@ -1,2 +1,2 @@ /*! concrete.css v3.0.0 | MIT License | github.com/louismerlin/concrete.css */ -:root{--fg:#111;--bg:#fff}@media (prefers-color-scheme:dark){:root{--fg:#fff;--bg:#111}}html{font-size:1.25rem;box-sizing:border-box}*,::after,::before{box-sizing:inherit;text-decoration-thickness:.1rem}body{background:var(--bg);font-family:Helvetica,Arial,sans-serif}a,body{color:var(--fg)}body,figure{margin:0}figcaption{text-align:right;font-size:.8em;border-bottom:.2rem solid var(--fg);padding-bottom:.2rem}img{max-width:100%;height:auto}main section+section{padding:2rem 0}body>footer,body>header,body>main{margin:auto;max-width:660px;padding-left:10px;padding-right:10px;width:100%}body>header{padding-top:8rem;padding-bottom:8rem;font-size:1.2em}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.17em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.67em}footer{text-align:center}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;vertical-align:middle;padding:.2rem .5rem;font-size:1rem;font-weight:400;margin-bottom:.5rem;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:0;cursor:pointer}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{border-style:dashed;cursor:not-allowed}ul{list-style:square}nav{margin:2rem 0}nav ul{padding:0;list-style:none}nav ul li{margin:0 .2rem;display:inline-block}fieldset{border:.1rem solid var(--fg)}label,legend{display:block;font-weight:700;margin-bottom:.4rem}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;box-sizing:inherit;padding:.2rem .5rem;width:100%;font-size:1rem;color:var(--fg);background-color:var(--bg);border:.1rem solid var(--fg);border-radius:0;font-family:Helvetica,Arial,sans-serif}fieldset,input,select,textarea{margin:0 0 .8rem}input::placeholder,textarea::placeholder{color:var(--fg);font-style:italic;opacity:1}table{width:100%;border-spacing:0}td,th{padding:.4rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}th{border-bottom:.1rem solid var(--fg);text-align:left}td{border-bottom:.05rem solid var(--fg)}blockquote,pre{margin-left:0;margin-right:0;padding:.5rem .8rem;border-left:.1rem solid var(--fg);overflow-y:hidden}pre{border:.05rem dotted var(--fg)}pre>code{white-space:pre;display:block;font-size:.8rem}progress{-moz-appearance:none;-webkit-appearance:none;display:block;height:.5rem;overflow:hidden;padding:0;width:100%;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:0}progress::-webkit-progress-bar{background-color:var(--bg)}progress::-webkit-progress-value{background-color:var(--fg)}progress::-moz-progress-bar{background-color:var(--fg)}hr{border:.05rem solid var(--fg)} \ No newline at end of file +@keyframes progress-indeterminate{0%{background-position:200%0}to{background-position:-200%0}}:root{--fg:#111;--bg:#fff}@media (prefers-color-scheme:dark){:root{--fg:#fff;--bg:#111}}html{font-size:1.25rem;box-sizing:border-box}*,::after,::before{box-sizing:inherit;text-decoration-thickness:.1rem}body{background:var(--bg);font-family:Helvetica,Arial,sans-serif}a,body{color:var(--fg)}body,figure{margin:0}figcaption{text-align:right;font-size:.8em;border-bottom:.2rem solid var(--fg);padding-bottom:.2rem}img{max-width:100%;height:auto}main section+section{padding:2rem 0}body>footer,body>header,body>main{margin:auto;max-width:660px;padding-left:10px;padding-right:10px;width:100%}body>header{padding-top:8rem;padding-bottom:8rem;font-size:1.2em}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.17em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.67em}footer{text-align:center}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;vertical-align:middle;padding:.2rem .5rem;font-size:1rem;font-weight:400;margin-bottom:.5rem;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:0;cursor:pointer}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{border-style:dashed;cursor:not-allowed}ul{list-style:square}nav{margin:2rem 0}nav ul{padding:0;list-style:none}nav ul li{margin:0 .2rem;display:inline-block}fieldset{border:.1rem solid var(--fg)}label,legend{display:block;font-weight:700;margin-bottom:.4rem}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;box-sizing:inherit;padding:.2rem .5rem;width:100%;font-size:1rem;color:var(--fg);background-color:var(--bg);border:.1rem solid var(--fg);border-radius:0;font-family:Helvetica,Arial,sans-serif}fieldset,input,select,textarea{margin:0 0 .8rem}input::placeholder,textarea::placeholder{color:var(--fg);font-style:italic;opacity:1}table{width:100%;border-spacing:0}td,th{padding:.4rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}th{border-bottom:.1rem solid var(--fg);text-align:left}td{border-bottom:.05rem solid var(--fg)}blockquote,pre{margin-left:0;margin-right:0;padding:.5rem .8rem;border-left:.1rem solid var(--fg);overflow-y:hidden}pre{border:.05rem dotted var(--fg)}pre>code{white-space:pre;display:block;font-size:.8rem}progress{-moz-appearance:none;-webkit-appearance:none;display:block;height:.5rem;overflow:hidden;padding:0;width:100%;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:0}progress::-webkit-progress-bar{background:0 0}progress::-webkit-progress-value{background-color:var(--fg)}progress::-moz-progress-bar{background-color:var(--fg)}@media (prefers-reduced-motion:no-preference){progress:indeterminate{background:var(--bg) linear-gradient(to right,var(--fg) 30%,var(--bg) 30%) top left/150% 150%no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}[dir=rtl] progress::indeterminate{animation-direction:reverse}}hr{border:.05rem solid var(--fg)} \ No newline at end of file diff --git a/index.html b/index.html index a285280..ce6ba42 100644 --- a/index.html +++ b/index.html @@ -276,7 +276,10 @@

Blockquotes

Progress Bar

+

With a value

40% +

Indeterminate

+ indeterminate