@mantine/core/cjs/components/Loader/Loader.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Loader.module.cjs","names":[],"sources":["../../../src/components/Loader/Loader.module.css"],"sourcesContent":[".root {\n  --loader-size-xs: 18px;\n  --loader-size-sm: 22px;\n  --loader-size-md: 36px;\n  --loader-size-lg: 44px;\n  --loader-size-xl: 58px;\n  --loader-size: var(--loader-size-md);\n  --loader-color: var(--mantine-primary-color-filled);\n}\n\n/* ----- Bars loader ----- */\n@keyframes bars-loader-animation {\n  0% {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  50%,\n  100% {\n    transform: scale(1);\n  }\n}\n\n.barsLoader {\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n  display: flex;\n  gap: calc(var(--loader-size) / 5);\n}\n\n.bar {\n  flex: 1;\n  background: var(--loader-color);\n  animation: bars-loader-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;\n  border-radius: 2px;\n\n  &:nth-of-type(1) {\n    animation-delay: -240ms;\n  }\n\n  &:nth-of-type(2) {\n    animation-delay: -120ms;\n  }\n\n  &:nth-of-type(3) {\n    animation-delay: 0;\n  }\n}\n\n/* ----- Dots loader ----- */\n@keyframes loader-dots-animation {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: scale(0.6);\n    opacity: 0.5;\n  }\n}\n\n.dotsLoader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: calc(var(--loader-size) / 10);\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n}\n\n.dot {\n  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  border-radius: 50%;\n  background: var(--loader-color);\n  animation: loader-dots-animation 0.8s infinite linear;\n\n  &:nth-child(2) {\n    animation-delay: 0.4s;\n  }\n}\n\n/* ----- Oval loader ----- */\n@keyframes oval-loader-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ovalLoader {\n  display: inline-block;\n  width: var(--loader-size);\n  height: var(--loader-size);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--loader-size);\n    height: var(--loader-size);\n    border-radius: 10000px;\n    border-width: calc(var(--loader-size) / 8);\n    border-style: solid;\n    border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;\n    animation: oval-loader-animation 1.2s linear infinite;\n  }\n}\n"],"mappings":""}