Progress/Skill - Pie/Bar

Feature Requests
1

I would like, much more welcome, if cwicly had a progress bar (pie) for skills.

2

You can build it just with a set of divs and/or :before or :after pseudo classes.

3

Like @Dev.tomi said, Cwicly gives you all the tools to achieve that.
You can also animate the bars (progress) when scrolling into view, using the animate on scroll option in combination with relative styling.

If you need help with it, just ping me here.
Will create that for you so you have a decent starting point, maybe even with some kind of tutorial in case you are interested.

Welcome to the forum btw. @vision4web :v:

3 Likes
4

Some kind of tuto would be welcome. I don’t really need this feature but I am very interested and curious with your development with Cwicly.
Thank you @Marius

2 Likes
5

Hi Marius,

yes i need help, pls :slight_smile:

6

Noted, @weedor & @vision4web.
Will share something during the next week.

3 Likes
7

GREAT, i will wait for it :smiley:

8

Hello Marius,

thanks for your help, I don’t need the explanation anymore, figured it out! But for others this is certainly helpful and for this should give an explanation.

Best regards

9

Even scroll animations would be possible apart from the usual hover. I was using Intersection Observer (JavaScript) a lot these last few week… really great. You can use it to add classes to an element when it comes into view… combine that with a transition and off you go!

10

@vision4web thanks for your feedback, happy you could solve it on your own.
I’ll keep it on the list, some people might be still interested I think.
Gonna create a new topic in the “how-to” category as soon as I have something to share.

@MaxZieb hey Max. Appreciate your feedback.
Could you elaborate what you mean with the “usual hover”?
Since animating the progress of a progress bar when scrolling into view is already possible out of the box and without writing a single line of code, I prefer in-built functions in most cases.
I think it is important that people can follow your steps, even if you use some minor (css) hacks.
Throwing in code snippets will help one for the moment but is useless to help understanding how to create things with Cwicly.

11

@Marius True, I was using it on another project and speaking in general terms. Sorry, will try to stay in the Cwicly realm when posting here.

1 Like
12

No worries, that was actually my first impression.

Please don’t stop to share your valuable thoughts with this community.
Hope you will enrich this place with your experience in the future, great to have you here!