primevue/progressspinner/style/index.mjs

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

import BaseStyle from '@primevue/core/base/style';

var style = /*css*/"\n.p-progressspinner {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100px;\n    height: 100px;\n}\n\n.p-progressspinner-circle {\n    width: 100%;\n    height: 100%;\n}\n\n.p-progressspinner-circle-track {\n    stroke: dt('content.border.color');\n}\n\n.p-progressspinner-circle-range {\n    stroke: dt('progressspinner.color.one');\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.3s;\n}\n\n[data-state=\"determinate\"] .p-progressspinner-circle-range {\n    transform: rotate(-90deg);\n    transform-origin: center;\n}\n\n[data-state=\"indeterminate\"] .p-progressspinner-circle {\n    animation: p-progressspinner-rotate 2s linear infinite;\n    transform-origin: center;\n}\n\n[data-state=\"indeterminate\"] .p-progressspinner-circle-range {\n    stroke-dasharray: 1, 302;\n    stroke-dashoffset: 0;\n    animation:\n        p-progressspinner-dash 1.5s ease-in-out infinite,\n        p-progressspinner-color 6s ease-in-out infinite;\n}\n\n.p-progressspinner-value {\n    fill: dt('text.muted.color');\n}\n\n@keyframes p-progressspinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes p-progressspinner-dash {\n    0% {\n        stroke-dasharray: 1, 302;\n        stroke-dashoffset: 0;\n    }\n    50% {\n        stroke-dasharray: 136, 302;\n        stroke-dashoffset: -54px;\n    }\n    100% {\n        stroke-dasharray: 1, 302;\n        stroke-dashoffset: -302px;\n    }\n}\n\n@keyframes p-progressspinner-color {\n    100%,\n    0% {\n        stroke: dt('progressspinner.color.one');\n    }\n    40% {\n        stroke: dt('progressspinner.color.two');\n    }\n    66% {\n        stroke: dt('progressspinner.color.three');\n    }\n    80%,\n    90% {\n        stroke: dt('progressspinner.color.four');\n    }\n}\n";
var classes = {
  root: 'p-progressspinner',
  circle: 'p-progressspinner-circle',
  circleTrack: 'p-progressspinner-circle-track',
  circleRange: 'p-progressspinner-circle-range',
  value: 'p-progressspinner-value'
};
var ProgressSpinnerStyle = BaseStyle.extend({
  name: 'progressspinner',
  style: style,
  classes: classes
});

export { ProgressSpinnerStyle as default };