diff --git a/CHANGELOG.md b/CHANGELOG.md index daa601bd4b..90a2b187f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - add window titlebar for html_email- and help window #3770 #3778 - add quick key `Cmd+W`/`Ctrl+W` to close webxdc-, html_email- and help-window #3770 #3778 - Accept images from clipboard in QR reader #3762 +- Introduce new `Spinner` component #3786 ### Changed - Update translations (2024-04-04) #3746 diff --git a/src/renderer/components/QrReader/index.tsx b/src/renderer/components/QrReader/index.tsx index a5978e714d..1a2eae7d9f 100644 --- a/src/renderer/components/QrReader/index.tsx +++ b/src/renderer/components/QrReader/index.tsx @@ -7,9 +7,9 @@ import React, { } from 'react' import scanQrCode from 'jsqr' import classNames from 'classnames' -import { Spinner } from '@blueprintjs/core' import Icon from '../Icon' +import Spinner from '../Spinner' import useTranslationFunction from '../../hooks/useTranslationFunction' import { ContextMenuContext } from '../../contexts/ContextMenuContext' import { ScreenContext } from '../../contexts/ScreenContext' diff --git a/src/renderer/components/Spinner/index.tsx b/src/renderer/components/Spinner/index.tsx new file mode 100644 index 0000000000..bd70cfb82a --- /dev/null +++ b/src/renderer/components/Spinner/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +import styles from './styles.module.scss' + +type Props = { + size?: number +} + +export default function Spinner({ size = 50 }: Props) { + return
+} diff --git a/src/renderer/components/Spinner/styles.module.scss b/src/renderer/components/Spinner/styles.module.scss new file mode 100644 index 0000000000..f4a9a91410 --- /dev/null +++ b/src/renderer/components/Spinner/styles.module.scss @@ -0,0 +1,18 @@ +@keyframes spin { + to { + transform: rotate(1turn); + } +} + +.spinner { + aspect-ratio: 1; + background: var(--colorPrimary); + border-radius: 50%; + padding: 8px; + --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box; + -webkit-mask: var(--_m); + mask: var(--_m); + -webkit-mask-composite: source-out; + mask-composite: subtract; + animation: spin 1.5s infinite linear; +}