Day # 61: Circular progress



Progress bars are a very frequent feature in some websites. Especially when you are trying to describe certain services that are specialized in some fields, the visitor to our websites needs to be able to see how a particular business rates the services it provides.

They also represent a good opportunity to hone our CSS skills. With that in mind I decided to create for today’s website a circular progress bar. I had previously worked with others that were horizontal, so to make it circular was definitely a challenge. Fortunately, I found an innovative way to fill the progress of a circular bar thanks to Online Artist.


But first, I need to cover the issue of making an outer circle which hosts the progress bar. For that, one only need to play around with the before pseudo element:

.circular-progress::before {

    content: "";

    position: absolute;

    height: 84%;

    width: 84%;

    background-color: #fff;

    border-radius: 50%;

}


And finally, you need to fill that outer circle based on the progress by using the conic-gradient property:


        let progress = setInterval(() => {

            progressValue++

            valueContainer.textContent = `${progressValue}%`

            progressBar.style.background = `conic-gradient(

                #4d5bf9 ${progressValue * 3.6}deg,

                #cadcff ${progressValue * 3.6}deg

            )`

            if (progressValue == progressEndValue) {

                clearInterval(progress)

            }

        }, speed)

Comments

Post a Comment

Popular posts from this blog

Day # 19: Checkbox animation

Image
Forms are a commonly used functionality for any website. As frontend developers we need to be able to handle their styling. One important element of forms is checkboxes. Styling them is not a particularly easy task, but as with any complex one, if we divide them into small and feasible activities, then we will accomplish our goal. The first thing we need to do is to include an input type checkbox:             <input type="checkbox" id="good" class="toggle">             <label for="good" class="label">                 <div class="ball"></div>             </label>             <span>Check!</span> Then we need to style the label: .label {     po...
Read more

Day # 12: Typewriter Effect

Image
I have always loved the typewriter effect. This may be explained by the fact that I’m a writer and I have a certain weakness to old school utensils. However, I had always found ways to achieve that effect with Javascript. I always thought there had to be a way to do so with only HTML and CSS… and I found it! A Youtuber called Clueless Expert came up with a method that I found very ingenious, and it comprises the styling of the border like this to achieve the effect of the blinking cursor: border-right: 5px solid; Then, he created an animation on the text using the CSS animation-timing-function and the stepping function steps(): that specifies a stepping function, specifying the number of intervals in the function. In this case, the steps should match the number of characters of the text, which in our example are 17.     animation:          typing 2s steps(17),         cursor .4s step-end infi...
Read more

Day # 53: Icon text

Image
While working on a previous project that involved icons, I came up with another way to display text while hovering them. I thought I could change the background color for each one of them while showing the title for each icon. As a bonus, I also added a box-shadow that corresponded with the background color. It’s just a matter of styling the icon that we are hovering to make it look as we wish. If we think of new ideas while working on different projects, it is always recommended that you implement those ideas so you can keep that practice streak.
Read more