From ebc5ad28173ae0bbae53bfe6e468e009d184d8f7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 18:33:29 +0800 Subject: ADD: Progress indeterminate animation --- src/progress.less | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'src/progress.less') diff --git a/src/progress.less b/src/progress.less index 24c3000..bd4785a 100644 --- a/src/progress.less +++ b/src/progress.less @@ -2,13 +2,16 @@ // Credit: https://css-tricks.com/html5-progress-element/ .progress { appearance: none; + background: @core-border-color; border: 0; + border-radius: @border-radius; color: @core-color; height: .4rem; + position: relative; width: 100%; &::-webkit-progress-bar { - background: @core-border-color; + background: transparent; border-radius: @border-radius; } @@ -21,4 +24,23 @@ background: @core-color; border-radius: @border-radius; } + + &:indeterminate { + animation: progress-indeterminate 1.5s linear infinite; + background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) no-repeat; + background-size: 150% 150%; + + &::-moz-progress-bar { + background: transparent; + } + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } -- cgit v1.3.1-23-gd82d From 7aae225118ef1a313751340378896b202fdbc5fd Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 18:57:49 +0800 Subject: CHG: Progress background shorthand --- dist/spectre-exp.css | 3 +-- dist/spectre-exp.min.css | 2 +- docs/css/spectre-exp.css | 3 +-- docs/css/spectre-exp.min.css | 2 +- src/progress.less | 3 +-- 5 files changed, 5 insertions(+), 8 deletions(-) (limited to 'src/progress.less') diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css index 98ab342..1d85409 100644 --- a/dist/spectre-exp.css +++ b/dist/spectre-exp.css @@ -75,8 +75,7 @@ .progress:indeterminate { -webkit-animation: progress-indeterminate 1.5s linear infinite; animation: progress-indeterminate 1.5s linear infinite; - background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) no-repeat; - background-size: 150% 150%; + background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) top left / 150% 150% no-repeat; } .progress:indeterminate::-moz-progress-bar { background: transparent; diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css index 6d2f9b7..950316e 100644 --- a/dist/spectre-exp.min.css +++ b/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) no-repeat;background-size:150% 150%}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 98ab342..1d85409 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -75,8 +75,7 @@ .progress:indeterminate { -webkit-animation: progress-indeterminate 1.5s linear infinite; animation: progress-indeterminate 1.5s linear infinite; - background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) no-repeat; - background-size: 150% 150%; + background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) top left / 150% 150% no-repeat; } .progress:indeterminate::-moz-progress-bar { background: transparent; diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css index 6d2f9b7..950316e 100644 --- a/docs/css/spectre-exp.min.css +++ b/docs/css/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) no-repeat;background-size:150% 150%}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/src/progress.less b/src/progress.less index bd4785a..ed45c32 100644 --- a/src/progress.less +++ b/src/progress.less @@ -27,8 +27,7 @@ &:indeterminate { animation: progress-indeterminate 1.5s linear infinite; - background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) no-repeat; - background-size: 150% 150%; + background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat; &::-moz-progress-bar { background: transparent; -- cgit v1.3.1-23-gd82d