@visa/nova-styles/components/progress/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-progress-animation-factor:1;--v-progress-bar-background-color:var(--palette-default-surface-3);--v-progress-bar-border-radius:var(--size-rounded-small);--v-progress-bar-foreground-color:var(--palette-default-active);--v-progress-bar-high-contrast-border:solid var(--size-scalable-1);--v-progress-bar-high-contrast-value-border:solid var(--size-scalable-2);--v-progress-bar-indeterminate-width:25%;--v-progress-bar-inline-size:100%;--v-progress-bar-thickness:var(--size-scalable-4);--v-progress-bar-width:100%;--v-progress-circular-background-dasharray:180 180;--v-progress-circular-background-dashoffset:300;--v-progress-circular-bar-dasharray:180 180;--v-progress-circular-bar-dashoffset:141;--v-progress-circular-label-inset-block-start:0;--v-progress-circular-line-cap:round;--v-progress-circular-origin:50% 50%;--v-progress-circular-size:72px;--v-progress-circular-size-small:48px;--v-progress-circular-transform:rotate(-90deg);--v-progress-display:block;--v-progress-icon-complete-color:var(--palette-messaging-graphics-positive);--v-progress-icon-error-color:var(--palette-messaging-graphics-negative);--v-progress-label-default-color:var(--palette-default-text-subtle);--v-progress-label-error-color:var(--palette-messaging-text-negative)}}@layer components{.v-progress{animation-play-state:inherit;position:relative}@media(preference-reduced-motion){.v-progress{--theme-animation-factor:0}}.v-progress-complete+.v-progress-label{--v-icon-primary:var(--v-progress-icon-complete-color);--v-icon-secondary:var(--v-progress-icon-complete-color)}.v-progress-error+.v-progress-label{--v-progress-label-default-color:var(--v-progress-label-error-color);--v-icon-primary:var(--v-progress-icon-error-color);--v-icon-secondary:var(--v-progress-icon-error-color)}.v-progress+.v-progress-label{--typography-font-family:var(--typography-label-font-family);--typography-font-size:var(--typography-label-font-size);--typography-font-weight:var(--typography-label-font-weight);--typography-letter-spacing:var(--typography-label-letter-spacing);--typography-line-height:var(--typography-label-line-height);--typography-text-decoration:var(--typography-label-text-decoration);--typography-text-transform:var(--typography-label-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);color:var(--v-progress-label-default-color);display:flex;justify-content:space-between}.v-progress-bar{block-size:var(--v-progress-bar-thickness);border-radius:var(--v-progress-bar-border-radius);inline-size:var(--v-progress-bar-inline-size);overflow:hidden}@media(prefers-contrast: more)and (forced-colors: active){.v-progress-bar{border:var(--v-progress-bar-high-contrast-border)}}.v-progress-bar::-webkit-progress-bar{background-color:var(--v-progress-bar-background-color);border-radius:var(--v-progress-bar-border-radius)}.v-progress-bar::-moz-progress-bar{background-color:var(--v-progress-bar-background-color);border-radius:var(--v-progress-bar-border-radius)}.v-progress-bar::-webkit-progress-value{background-color:var(--v-progress-bar-foreground-color);block-size:var(--v-progress-bar-width);border-radius:var(--v-progress-bar-border-radius)}@media(prefers-contrast: more)and (forced-colors: active){.v-progress-bar::-webkit-progress-value{outline:2px solid rgba(0,0,0,0);outline-offset:-2px}}.v-progress-bar:not([value])::after{-webkit-animation:progress-bar-animation-indeterminate calc(3s*var(--v-progress-animation-factor)) infinite linear;animation:progress-bar-animation-indeterminate calc(3s*var(--v-progress-animation-factor)) infinite linear;animation-play-state:inherit;background-color:var(--v-progress-bar-foreground-color);block-size:var(--v-progress-bar-width);border-radius:var(--v-progress-bar-border-radius);content:"";inline-size:var(--v-progress-bar-indeterminate-width);margin-block-start:calc(var(--v-progress-bar-thickness)*-1);position:absolute}@media(prefers-contrast: more)and (forced-colors: active){.v-progress-bar:not([value])::after{border-block-start:var(--v-progress-bar-thickness) solid currentColor;height:var(--v-progress-bar-thickness)}}.v-progress-circular-track{block-size:var(--v-progress-circular-size);display:var(--v-progress-display);inline-size:var(--v-progress-circular-size)}.v-progress-circular-background{cx:calc(var(--v-progress-circular-size)/2);cy:calc(var(--v-progress-circular-size)/2);fill:rgba(0,0,0,0);r:calc((var(--v-progress-circular-size) - var(--v-progress-bar-thickness))/2);stroke:var(--v-progress-bar-background-color);stroke-linecap:var(--v-progress-circular-line-cap);stroke-width:var(--v-progress-bar-thickness)}@media(prefers-contrast: more)and (forced-colors: active){.v-progress-circular-background{stroke:Canvas}}.v-progress-circular-bar{-webkit-transform:var(--v-progress-circular-transform);-webkit-transform-origin:var(--v-progress-circular-origin);cx:calc(var(--v-progress-circular-size)/2);cy:calc(var(--v-progress-circular-size)/2);fill:rgba(0,0,0,0);r:calc((var(--v-progress-circular-size) - var(--v-progress-bar-thickness))/2);stroke:var(--v-progress-bar-foreground-color);stroke-linecap:var(--v-progress-circular-line-cap);stroke-width:var(--v-progress-bar-thickness);transform:var(--v-progress-circular-transform);transform-origin:var(--v-progress-circular-origin)}@media(prefers-contrast: more)and (forced-colors: active){.v-progress-circular-bar{stroke:currentColor}}.v-progress-circular .v-progress-label{align-items:center;block-size:var(--v-progress-circular-size);display:grid;inline-size:var(--v-progress-circular-size);inset-block-start:var(--v-progress-circular-label-inset-block-start);justify-content:center;position:absolute}.v-progress-circular:is(.v-progress-indeterminate) .v-progress-circular-track{animation:progress-spinner-animation-background-indeterminate calc(5s*var(--v-progress-animation-factor)) infinite linear;animation-play-state:inherit}.v-progress-circular:is(.v-progress-indeterminate) .v-progress-circular-background{animation:progress-spinner-animation-background-indeterminate calc(3s*var(--v-progress-animation-factor)) infinite linear;animation-play-state:inherit;stroke-dasharray:var(--v-progress-circular-background-dasharray);stroke-dashoffset:var(--v-progress-circular-background-dashoffset)}.v-progress-circular:is(.v-progress-indeterminate) .v-progress-circular-bar{animation:progress-spinner-animation-foreground-indeterminate calc(3s*var(--v-progress-animation-factor)) infinite linear;animation-play-state:inherit;stroke-dasharray:var(--v-progress-circular-bar-dasharray);stroke-dashoffset:var(--v-progress-circular-bar-dashoffset)}.v-progress-circular:is(.v-progress-circular-small) .v-progress-circular-track{--v-progress-circular-size:var(--v-progress-circular-size-small)}.v-progress-circular:is(.v-progress-circular-small) .v-progress-label{--v-progress-circular-size:var(--v-progress-circular-size-small)}@keyframes progress-bar-animation-indeterminate{0%{inline-size:20%;inset-inline-start:-20%}50%{inline-size:20%}100%{inline-size:20%;inset-inline-start:100%}}@keyframes progress-spinner-animation-foreground-indeterminate{0%{stroke-dashoffset:241.41;transform:rotate(0deg);transform-origin:50% 50%}65%{stroke-dashoffset:280.76}80%{stroke-dashoffset:280.76}100%{stroke-dashoffset:241.41;transform:rotate(720deg);transform-origin:50% 50%}}@keyframes progress-spinner-animation-background-indeterminate{0%{stroke-dashoffset:137.37;transform:rotate(0deg);transform-origin:50% 50%}65%{stroke-dashoffset:326.76}80%{stroke-dashoffset:266.41}100%{stroke-dashoffset:137.37;transform:rotate(720deg);transform-origin:50% 50%}}}