@vue-interface/activity-indicator/dist/activity-indicator.umd.cjs.map

An Vue activity indicator component.

{"version":3,"file":"activity-indicator.umd.cjs","sources":["../src/ActivityIndicator.vue","../src/types/Chase.vue","../src/types/CircleFade.vue","../src/types/CircleOrbit.vue","../src/types/CircleTrail.vue","../src/types/Dots.vue","../src/types/DoublePulse.vue","../src/types/Facebook.vue","../src/types/Grid.vue","../src/types/Pulse.vue","../src/types/Spinner.vue","../src/types/Spotify.vue","../src/types/Square.vue","../src/types/SquareFold.vue","../src/types/SquareOrbit.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type Component } from 'vue';\nimport { ComponentSize } from '@vue-interface/sizeable';\n\nexport type ActivityIndicatorSizePrefix = 'activity-indicator';\nexport type ActivityIndicatorSize = ComponentSize<ActivityIndicatorSizePrefix>;\n\nwithDefaults(defineProps<{\n    size?: ActivityIndicatorSize;\n    type: Component;\n}>(), {\n    size: 'activity-indicator-md'\n});\n</script>\n\n<template>\n    <div\n        class=\"activity-indicator\"\n        :class=\"size\">\n        <div class=\"activity-indicator-content\">\n            <Component\n                :is=\"type\"\n                class=\"mx-auto\" />\n        </div>\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-chase\">\n        <div class=\"activity-indicator-chase-dot\" />\n        <div class=\"activity-indicator-chase-dot\" />\n        <div class=\"activity-indicator-chase-dot\" />\n        <div class=\"activity-indicator-chase-dot\" />\n        <div class=\"activity-indicator-chase-dot\" />\n        <div class=\"activity-indicator-chase-dot\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-circle-fade\">\n        <div class=\"activity-indicator-circle1 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle2 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle3 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle4 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle5 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle6 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle7 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle8 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle9 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle10 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle11 activity-indicator-circle\" />\n        <div class=\"activity-indicator-circle12 activity-indicator-circle\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-circle-orbit\">\n        <div class=\"activity-indicator-circle-orbit-dot\" />\n        <div class=\"activity-indicator-circle-orbit-dot\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-circle-trail\">\n        <div class=\"activity-indicator-circle-trail1 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail2 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail3 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail4 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail5 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail6 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail7 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail8 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail9 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail10 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail11 activity-indicator-child\" />\n        <div class=\"activity-indicator-circle-trail12 activity-indicator-child\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-dots\">\n        <div class=\"activity-indicator-dots-bounce1\" />\n        <div class=\"activity-indicator-dots-bounce2\" />\n        <div class=\"activity-indicator-dots-bounce3\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-double-pulse\">\n        <div class=\"activity-indicator-double-pulse-bounce1\" />\n        <div class=\"activity-indicator-double-pulse-bounce2\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-facebook\">\n        <div class=\"activity-indicator-facebook-rect1\" />\n        <div class=\"activity-indicator-facebook-rect2\" />\n        <div class=\"activity-indicator-facebook-rect3\" />\n        <div class=\"activity-indicator-facebook-rect4\" />\n        <div class=\"activity-indicator-facebook-rect5\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-grid\">\n        <div class=\"activity-indicator-grid activity-indicator-grid1\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid2\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid3\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid4\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid5\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid6\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid7\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid8\" />\n        <div class=\"activity-indicator-grid activity-indicator-grid9\" />\n    </div>\n</template>","<template>\n    <div class=\"activity-indicator-pulse\" />\n</template>","<template>\n    <div class=\"activity-indicator-spinner\">\n        <div class=\"activity-indicator-spinner1 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner2 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner3 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner4 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner5 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner6 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner7 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner8 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner9 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner10 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner11 activity-indicator-spinner\" />\n        <div class=\"activity-indicator-spinner12 activity-indicator-spinner\" />\n    </div>\n</template>\n","<template>\n    <div class=\"activity-indicator-spotify\" />\n</template>\n\n<!-- <style>\n    .activity-indicator-spotify {\n        width: 2em;\n        height: 2em;\n        border-radius: 50%;\n        background: conic-gradient(white, black);\n        position: relative;\n        animation: activity-indicator-spotify 1.4s linear infinite;\n        transform: translateZ(0);\n    }\n\n    .activity-indicator-spotify::after {\n        background: white;\n        width: 75%;\n        height: 75%;\n        border-radius: 50%;\n        content: \"\";\n        margin: auto;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n    }\n\n    @keyframes activity-indicator-spotify {\n        from {\n            transform: rotate(0deg);\n        }\n\n        to {\n            transform: rotate(360deg);\n        }\n    }\n        \n</style> -->","<template>\n    <div class=\"activity-indicator-square\" />\n</template>","<template>\n    <div class=\"activity-indicator-square-fold\">\n        <div class=\"activity-indicator-square-fold-square1 activity-indicator-square-fold-square\" />\n        <div class=\"activity-indicator-square-fold-square2 activity-indicator-square-fold-square\" />\n        <div class=\"activity-indicator-square-fold-square4 activity-indicator-square-fold-square\" />\n        <div class=\"activity-indicator-square-fold-square3 activity-indicator-square-fold-square\" />\n    </div>\n</template>\n<!-- <style>\n.activity-indicator-square-fold {\n  margin: 1em;\n  width: 2.5em;\n  height: 2.5em;\n  position: relative;\n  -webkit-transform: rotateZ(45deg);\n          transform: rotateZ(45deg);\n}\n\n.activity-indicator-square-fold .activity-indicator-square-fold-square {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n  -webkit-transform: scale(1.1);\n      -ms-transform: scale(1.1);\n          transform: scale(1.1); \n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #333;\n  -webkit-animation: activity-indicator-square-fold 2.4s infinite linear both;\n          animation: activity-indicator-square-fold 2.4s infinite linear both;\n  -webkit-transform-origin: 100% 100%;\n      -ms-transform-origin: 100% 100%;\n          transform-origin: 100% 100%;\n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square2 {\n  -webkit-transform: scale(1.1) rotateZ(90deg);\n          transform: scale(1.1) rotateZ(90deg);\n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square3 {\n  -webkit-transform: scale(1.1) rotateZ(180deg);\n          transform: scale(1.1) rotateZ(180deg);\n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square4 {\n  -webkit-transform: scale(1.1) rotateZ(270deg);\n          transform: scale(1.1) rotateZ(270deg);\n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square2:before {\n  -webkit-animation-delay: 0.3s;\n          animation-delay: 0.3s;\n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square3:before {\n  -webkit-animation-delay: 0.6s;\n          animation-delay: 0.6s; \n}\n.activity-indicator-square-fold .activity-indicator-square-fold-square4:before {\n  -webkit-animation-delay: 0.9s;\n          animation-delay: 0.9s;\n}\n@-webkit-keyframes activity-indicator-square-fold {\n  0%, 10% {\n    -webkit-transform: perspective(140px) rotateX(-180deg);\n            transform: perspective(140px) rotateX(-180deg);\n    opacity: 0; \n  } 25%, 75% {\n    -webkit-transform: perspective(140px) rotateX(0deg);\n            transform: perspective(140px) rotateX(0deg);\n    opacity: 1; \n  } 90%, 100% {\n    -webkit-transform: perspective(140px) rotateY(180deg);\n            transform: perspective(140px) rotateY(180deg);\n    opacity: 0; \n  } \n}\n\n@keyframes activity-indicator-square-fold {\n  0%, 10% {\n    -webkit-transform: perspective(140px) rotateX(-180deg);\n            transform: perspective(140px) rotateX(-180deg);\n    opacity: 0; \n  } 25%, 75% {\n    -webkit-transform: perspective(140px) rotateX(0deg);\n            transform: perspective(140px) rotateX(0deg);\n    opacity: 1; \n  } 90%, 100% {\n    -webkit-transform: perspective(140px) rotateY(180deg);\n            transform: perspective(140px) rotateY(180deg);\n    opacity: 0; \n  }\n}\n</style> -->","<template>\n    <div class=\"activity-indicator-square-orbit\">\n        <div class=\"activity-indicator-square-orbit-cube1\" />\n        <div class=\"activity-indicator-square-orbit-cube2\" />\n    </div>\n</template>"],"names":["_createElementBlock","_normalizeClass","__props","_createElementVNode","_hoisted_1","_openBlock","_createBlock","_resolveDynamicComponent","_cache"],"mappings":"gcAgBIA,EAAAA,mBAQM,MAAA,CAPF,MAAKC,EAAAA,eAAA,CAAC,qBACEC,EAAA,IAAI,CAAA,CAAA,GACZC,EAAAA,mBAIM,MAJNC,EAIM,EAHFC,YAAA,EAAAC,EAAAA,YAEsBC,0BADbL,EAAA,IAAI,EAAA,CACT,MAAM,UAAS,EAAA,yFCrBtBE,EAAA,CAAA,MAAM,0BAA0B,kBAArC,OAAAC,YAAA,EAAAL,qBAOM,MAPNI,EAOM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,gWCPDJ,EAAA,CAAA,MAAM,gCAAgC,kBAA3C,OAAAC,YAAA,EAAAL,qBAaM,MAbNI,EAaM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,o6BCbDJ,EAAA,CAAA,MAAM,iCAAiC,kBAA5C,OAAAC,YAAA,EAAAL,qBAGM,MAHNI,EAGM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAFFL,EAAAA,mBAAmD,MAAA,CAA9C,MAAM,qCAAqC,EAAA,KAAA,EAAA,EAChDA,EAAAA,mBAAmD,MAAA,CAA9C,MAAM,qCAAqC,EAAA,KAAA,EAAA,uCCF/CC,EAAA,CAAA,MAAM,iCAAiC,kBAA5C,OAAAC,YAAA,EAAAL,qBAaM,MAbNI,EAaM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,g+BCbDJ,EAAA,CAAA,MAAM,yBAAyB,kBAApC,OAAAC,YAAA,EAAAL,qBAIM,MAJNI,EAIM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAHFL,EAAAA,mBAA+C,MAAA,CAA1C,MAAM,iCAAiC,EAAA,KAAA,EAAA,EAC5CA,EAAAA,mBAA+C,MAAA,CAA1C,MAAM,iCAAiC,EAAA,KAAA,EAAA,EAC5CA,EAAAA,mBAA+C,MAAA,CAA1C,MAAM,iCAAiC,EAAA,KAAA,EAAA,uCCH3CC,EAAA,CAAA,MAAM,iCAAiC,kBAA5C,OAAAC,YAAA,EAAAL,qBAGM,MAHNI,EAGM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAFFL,EAAAA,mBAAuD,MAAA,CAAlD,MAAM,yCAAyC,EAAA,KAAA,EAAA,EACpDA,EAAAA,mBAAuD,MAAA,CAAlD,MAAM,yCAAyC,EAAA,KAAA,EAAA,uCCFnDC,EAAA,CAAA,MAAM,6BAA6B,kBAAxC,OAAAC,YAAA,EAAAL,qBAMM,MANNI,EAMM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,yUCNDJ,EAAA,CAAA,MAAM,yBAAyB,kBAApC,OAAAC,YAAA,EAAAL,qBAUM,MAVNI,EAUM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,oqBCVDJ,EAAA,CAAA,MAAM,0BAA0B,kBAArC,OAAAC,YAAA,EAAAL,qBAAwC,MAAxCI,CAAwC,mCCAnCA,EAAA,CAAA,MAAM,4BAA4B,kBAAvC,OAAAC,YAAA,EAAAL,qBAaM,MAbNI,EAaM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,47BCbDJ,EAAA,CAAA,MAAM,4BAA4B,kBAAvC,OAAAC,YAAA,EAAAL,qBAA0C,MAA1CI,CAA0C,mCCArCA,EAAA,CAAA,MAAM,2BAA2B,mBAAtC,OAAAC,YAAA,EAAAL,qBAAyC,MAAzCI,CAAyC,sCCApCA,GAAA,CAAA,MAAM,gCAAgC,mBAA3C,OAAAC,YAAA,EAAAL,qBAKM,MALNI,GAKM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAJFL,EAAAA,mBAA4F,MAAA,CAAvF,MAAM,8EAA8E,EAAA,KAAA,EAAA,EACzFA,EAAAA,mBAA4F,MAAA,CAAvF,MAAM,8EAA8E,EAAA,KAAA,EAAA,EACzFA,EAAAA,mBAA4F,MAAA,CAAvF,MAAM,8EAA8E,EAAA,KAAA,EAAA,EACzFA,EAAAA,mBAA4F,MAAA,CAAvF,MAAM,8EAA8E,EAAA,KAAA,EAAA,2CCJxFC,GAAA,CAAA,MAAM,iCAAiC,mBAA5C,OAAAC,YAAA,EAAAL,qBAGM,MAHNI,GAGM,CAAA,GAAAI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAFFL,EAAAA,mBAAqD,MAAA,CAAhD,MAAM,uCAAuC,EAAA,KAAA,EAAA,EAClDA,EAAAA,mBAAqD,MAAA,CAAhD,MAAM,uCAAuC,EAAA,KAAA,EAAA"}