From cde9e091068a655024228df4513fda1b16da338a Mon Sep 17 00:00:00 2001 From: Jasmine Date: Fri, 1 Nov 2024 23:35:30 +0530 Subject: [PATCH] post on gradient progress bar --- .../11/2024-11-01-gradient-loader-part-1.md | 162 ++++++++++++++++++ .../11/2024-11-01-gradient-loader-part-2.md | 129 ++++++++++++++ tags/css-gradient/index.md | 5 + tags/css/index.md | 5 + tags/progress-bar/index.md | 5 + 5 files changed, 306 insertions(+) create mode 100644 _posts/2024/11/2024-11-01-gradient-loader-part-1.md create mode 100644 _posts/2024/11/2024-11-01-gradient-loader-part-2.md create mode 100644 tags/css-gradient/index.md create mode 100644 tags/css/index.md create mode 100644 tags/progress-bar/index.md diff --git a/_posts/2024/11/2024-11-01-gradient-loader-part-1.md b/_posts/2024/11/2024-11-01-gradient-loader-part-1.md new file mode 100644 index 0000000..9d560e8 --- /dev/null +++ b/_posts/2024/11/2024-11-01-gradient-loader-part-1.md @@ -0,0 +1,162 @@ +--- +author: "Jasmine Hirpara" +title: "Gradient progress bar - Part 1" +excerpt: "How to create a progress bar with single color gradient using CSS and use it to indicate scroll progress." +tags: [css, progress bar, css gradient] +permalink: /posts/gradient-loader +--- + +We all think of 2 or more colors when we hear the word gradient. Well...at least I do. That made me wonder what happens when we use a single color for a css gradient. So, to scratch that itch, i decided to check it out. + +## CSS gradient + +Lets start with a simple gradient. As per the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient), a gradient is a smooth transition between two or more colors. The gradient can be linear or radial. + +i will create a simple linear gradient with 2 colors. + +```css +.gradient { + background: linear-gradient(to right, #dc6c6c, #4d4d9c); +} +``` + +which looks like this: + +
+ +i wont discuss about how to create a gradient here as there are many resources available online. Now there is a way to specify which color will occupy how much space in the gradient. This can be done using the `color-stop` value. It can be a percentage or a length value. + +```css +.gradient-space { + background: linear-gradient(to right, #dc6c6c 30%, #4d4d9c 70%); +} +``` + +which looks like this: + +
+ +As you can see, the first color remains solid for the first 30% of the container's width and then from 30% to 70% the first color transitions to the second color. Then the second color remains solid for the rest of the container's width. What happens if the color-stop value is same? Lets find out. + +```css +.gradient-same { + background: linear-gradient(to right, #dc6c6c 50%, #4d4d9c 50%); +} +``` + +which looks like this: + +
+ +As you can see, with the same value of color-stop for both colors, we didnt offer any space for the first color to transition to the second color. So there is a hard stop at 50% of the container's width and the transition switches to the second color with no color blending or interpolation. i have covered the same behavior in my [svg gradient animation](posts/svg-gradient-animation) post but for svg gradients. + +## Single color gradient or is it? + +Now let me try and see what happens when we use a single color for a gradient. + +```css +.gradient-single { + background: linear-gradient(to right, #dc6c6c); +} +``` + +which looks like this: + +
+ oops! no gradient here +
+ +Well...the css complains and it does not render the gradient. So how do we create a gradient with a single color? Lets see what happens when we use the same color for both the colors in the gradient. + +```css +.gradient-single-color { + background: linear-gradient(to right, #dc6c6c, #dc6c6c); +} +``` + +which looks like this: + +
+ +Phew!! we have something. Not much but a solid color background. Let me add a twist to this. What if the second color is transparent? + +```css +.gradient-single-transparent { + background: linear-gradient(to right, #dc6c6c, transparent); +} +``` + +which looks like this: + +
+ +Well...we have a gradient now. The color gradually transitions to transparency. If we do not specify the color-stop value, it is assumed to be 0% for the first color and 100% for the second color. Now lets see what happens when we specify the color-stop value for the second color which is transparent. + +```css +.gradient-single-transparent-space { + background: linear-gradient(to right, #dc6c6c, transparent 50%); +} +``` + +which looks like this: + +
+ +The color transitions to transparency at 50% of the container's width. If you understood this, then you would have guessed what happens when we specify the same color-stop value for both colors. + +```css +.gradient-single-transparent-same { + background: linear-gradient(to right, #dc6c6c 50%, transparent 50%); +} +``` + +which looks like this: + +
+ +Oh my!! we have a progress bar here with 50% of the container's width filled with the color and the rest with transparency 😎 + +So far so good. We now have a static gradient progress bar. Making it dynamic is discussed in the [next part](/posts/gradient-loader-part-2) of this post. \ No newline at end of file diff --git a/_posts/2024/11/2024-11-01-gradient-loader-part-2.md b/_posts/2024/11/2024-11-01-gradient-loader-part-2.md new file mode 100644 index 0000000..cadbb9e --- /dev/null +++ b/_posts/2024/11/2024-11-01-gradient-loader-part-2.md @@ -0,0 +1,129 @@ +--- +author: "Jasmine Hirpara" +title: "Gradient progress bar - Part 2" +excerpt: "How to use css variable to create a dynamic gradient progress bar to indicate scroll progress." +tags: [css, progress bar, css gradient] +permalink: /posts/gradient-loader-part-2 +--- + +In the [previous post](/posts/gradient-loader), i created a simple static gradient progress bar. In this post, i will show you how to make it dynamic to indicate scroll progress. + +## Element scroll event + +Whenever the content of an element overflows, the element gets a scrollbar either horizontally or vertically or both. We can use the `scroll` event to detect when the user scrolls the content of an element. + +```js +const element = document.querySelector('.gradient-progress'); +element.addEventListener('scroll', (event) => { + // code to update the progress bar +}); +``` + +## Tracking the scroll progress + +To track the scroll progress, we need to use the following properties of the element: +- [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) +- [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) +- [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) + +Here is how we can calculate the scroll progress: + +```js +element.addEventListener('scroll', () => { + const progress = Math.round((element.scrollTop / (element.scrollHeight - element.clientHeight)) * 100); +}); +``` +{: .snippet} + +Here `element.scrollTop` is the number of pixels that the content of the element is scrolled vertically, `element.scrollHeight` is the total height of the content including the overflowed content and `element.clientHeight` is the height of the element including the padding. + +## Updating the scroll progress + +Now that we have the scroll progress, how can i link it to the progress bar? There may be different ways to do this. i will show you one way to do it. i will use a css variable to update the progress bar. + +```js +element.addEventListener('scroll', () => { + const progress = Math.round((element.scrollTop / (element.scrollHeight - element.clientHeight)) * 100); + element.style.setProperty('--g-progress', `${progress}%`); +}); +``` +{: .snippet} + +Here i am setting the `--g-progress` css variable on the element. This variable will be used to update the gradient of the progress bar. + +## Styling a pseudo element to show the grdient progress bar + +To create a gradient progress bar, i will use a pseudo element `::before` and apply a gradient to it. i will use the `--g-progress` variable to update the gradient. + +```css +.gradient-progress { + position: relative; + overflow-y: auto; + max-height: 30vh; + border: 1px solid #ccc; + border-radius: 5px; + padding: 1rem; + padding-top: 0; +} + +.gradient-progress::before { + content: ''; + display: block; + position: sticky; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 5px; + background: linear-gradient(to right, #dc6c6c var(--g-progress, 0%), transparent var(--g-progress, 0%)); +} +``` +{: .snippet} + +```html +
+ +
+``` + +Here in css, i have set the height of the pseudo element to `5px` and applied a gradient to it. The gradient color-stops are set using the `--g-progress` variable. The `var(--g-progress, 0%)` means that if the `--g-progress` variable is not set, then the default value will be `0%`. Now whenever we scroll the content, the value of the `--g-progress` variable will be updated using the scroll event listener. This will update the gradient color-stops of the pseudo element and show the progress accordingly. + +i have created an inline demo below. Scroll the content to see the progress bar in action. + + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ + + +i have used the same concept for the blue progress bar that you see at the top of the page which indicates the scroll progress of the page. Now that you are here, it should indicate 100% 😀. Hope you learned something. \ No newline at end of file diff --git a/tags/css-gradient/index.md b/tags/css-gradient/index.md new file mode 100644 index 0000000..0a09127 --- /dev/null +++ b/tags/css-gradient/index.md @@ -0,0 +1,5 @@ +--- +layout: tag +title: "Tag: css gradient" +tag: css gradient +--- diff --git a/tags/css/index.md b/tags/css/index.md new file mode 100644 index 0000000..d477177 --- /dev/null +++ b/tags/css/index.md @@ -0,0 +1,5 @@ +--- +layout: tag +title: "Tag: css" +tag: css +--- diff --git a/tags/progress-bar/index.md b/tags/progress-bar/index.md new file mode 100644 index 0000000..a04d070 --- /dev/null +++ b/tags/progress-bar/index.md @@ -0,0 +1,5 @@ +--- +layout: tag +title: "Tag: progress bar" +tag: progress bar +---