primevue/progressbar/style/progressbarstyle.esm.js

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

import BaseStyle from 'primevue/base/style';

var css = "\n@layer primevue {\n    .p-progressbar {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-progressbar-determinate .p-progressbar-value {\n        height: 100%;\n        width: 0%;\n        position: absolute;\n        display: none;\n        border: 0 none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n    }\n\n    .p-progressbar-determinate .p-progressbar-label {\n        display: inline-flex;\n    }\n\n    .p-progressbar-determinate .p-progressbar-value-animate {\n        transition: width 1s ease-in-out;\n    }\n\n    .p-progressbar-indeterminate .p-progressbar-value::before {\n        content: '';\n        position: absolute;\n        background-color: inherit;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        will-change: left, right;\n        -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    .p-progressbar-indeterminate .p-progressbar-value::after {\n        content: '';\n        position: absolute;\n        background-color: inherit;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        will-change: left, right;\n        -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n        -webkit-animation-delay: 1.15s;\n        animation-delay: 1.15s;\n    }\n\n    @-webkit-keyframes p-progressbar-indeterminate-anim {\n        0% {\n            left: -35%;\n            right: 100%;\n        }\n        60% {\n            left: 100%;\n            right: -90%;\n        }\n        100% {\n            left: 100%;\n            right: -90%;\n        }\n    }\n    @keyframes p-progressbar-indeterminate-anim {\n        0% {\n            left: -35%;\n            right: 100%;\n        }\n        60% {\n            left: 100%;\n            right: -90%;\n        }\n        100% {\n            left: 100%;\n            right: -90%;\n        }\n    }\n\n    @-webkit-keyframes p-progressbar-indeterminate-anim-short {\n        0% {\n            left: -200%;\n            right: 100%;\n        }\n        60% {\n            left: 107%;\n            right: -8%;\n        }\n        100% {\n            left: 107%;\n            right: -8%;\n        }\n    }\n    @keyframes p-progressbar-indeterminate-anim-short {\n        0% {\n            left: -200%;\n            right: 100%;\n        }\n        60% {\n            left: 107%;\n            right: -8%;\n        }\n        100% {\n            left: 107%;\n            right: -8%;\n        }\n    }\n}\n";
var classes = {
  root: function root(_ref) {
    var instance = _ref.instance;
    return ['p-progressbar p-component', {
      'p-progressbar-determinate': instance.determinate,
      'p-progressbar-indeterminate': instance.indeterminate
    }];
  },
  container: 'p-progressbar-indeterminate-container',
  value: 'p-progressbar-value p-progressbar-value-animate',
  label: 'p-progressbar-label'
};
var ProgressBarStyle = BaseStyle.extend({
  name: 'progressbar',
  css: css,
  classes: classes
});

export { ProgressBarStyle as default };