Implementing an animated progress bar for tracking article read progress.
I'm trying to animated a bar using css, the default continuous bar works fine, but I have a list of divs (say 10 divs) that are little squares in a row, and I want to paint x number of squares based on how much the css bar is animated. say 50% of the bar is animated so i'm at keyframe 5/10, I want to translate that progress to the number 5 and then render 5 filled blocks in my div list
I'm using react and plain css. Here is my css, I took it from https://scroll-driven-animations.style/demos/progress-bar/css/
as you see on the screen, there is a red bar at the top which shows the scroll percentage (how far we have scrolled from the top of the article. and the green blocks that are filled are showing the same progress but in discrete units. (it's currently not working propertly the filled in ones are just a random number)
in my latest approach I tried making a new css @property (--scrolled) and inside the keyframes interpolated between 0 and x (say 20 blocks) in my animation keyframes, but I'm not able to access the updated --scrolled property with js, I'm not even seeing it be updated on dev console. ...
space between pushing content under the scroll bar
i had it working before, but i wanted the header to be sticky. The sticky property didnt work so i made it fixed. That worked, but now it had a new problem of taking up just enough space it needed to fit everything, and now ive put width 100% and it pushes the items behind the scroll bar. How do i fix this or make the sticky work with what i had originally?
Suggestion for Page Layout and How to Manage It
Hello 👋🏻
I would like to know,
- How can I make aside element sticked on the right of the grid? I used
position: sticky; but probably going to play with it more later on.
- Since I am trying to make it responsive, how can I make it on top of the screen? Should I put section and aside element in a div? (But this time my grid-template-are property won't work well)...
Is there a way to prevent these border-radius shine-through's?
So, like in the screenshot: you've got a dark background, inside it a light element with a border-radius and overflow:hidden
And inside this element another one with a different background color (or an image). And the mask doesn't really fit the radius but you get these 1px background colored border lines.
I just saw a "solution" to paint this over / blur away on stackoverflow, which really just works in a few cases. Isn't there another way?...
I just saw a "solution" to paint this over / blur away on stackoverflow, which really just works in a few cases. Isn't there another way?...
This ratio of this grid layout
it's simple, what would be the ratios of these rows and columns? ive figured out that in terms of cols, it's 12 but i can't figure out the rows.. any help? <3
Aligning item in a Grid
Hi guys, how can I get rid of this white space which is between the logo image at the top, and the content at the bottom? Ideally, I would like for the content to sit right underneath the logo. I am using grid here. I used grid-template-areas property so the image would be at the right corner
stretch a div to the bottom of the screen
I have a div that i want to fill the screen. how do i do this?
Implementing a Non-Wrapping, Count-Based Multi-Select Dropdown with MUI Chips
I am using the MUI library for a project that involves a multi-select dropdown with chips representing the selected data. The functionality is working well, but I'm encountering an issue with responsiveness: the chips are wrapping onto multiple lines. What I would like to achieve is a design where, instead of wrapping, it displays a text like "+2 more" or "+3 more" at the end when there are more items than can fit in a single line. I'm not sure how to implement this feature in MUI. Could anyone provide assistance or guidance on how to achieve this in MUI?
Code Sandbox Link: https://codesandbox.io/p/sandbox/mui-multiselect-sp4sg3?file=%2Fsrc%2FApp.js%3A10%2C13
I have attached my output and my required output images....
