From 71942c86311a9d1ddf4ae486d811f8393786e855 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 25 Jan 2022 11:47:59 +0100 Subject: chore: display a progress bar before load more button Since I'm using cursor pagination, users cannot know if there is a lot of posts available. With this cursor, they can verify the progression. --- .../PaginationCursor/PaginationCursor.module.scss | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/PaginationCursor/PaginationCursor.module.scss (limited to 'src/components/PaginationCursor/PaginationCursor.module.scss') diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss new file mode 100644 index 0000000..35484ea --- /dev/null +++ b/src/components/PaginationCursor/PaginationCursor.module.scss @@ -0,0 +1,28 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + margin: var(--spacing-sm) auto var(--spacing-md); + width: max-content; + + .bar[value] { + display: block; + width: 30ch; + height: fun.convert-px(13); + appearance: none; + background: var(--color-bg-tertiary); + border: fun.convert-px(1) solid var(--color-primary-darker); + border-radius: 1em; + box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1) + var(--color-shadow-light); + + &::-webkit-progress-value { + background-color: var(--color-primary-dark); + border-radius: 1em; + } + + &::-moz-progress-bar { + background-color: var(--color-primary-dark); + border-radius: 1em; + } + } +} -- cgit v1.2.3