Loading sections

HTML & CSS
1

Hello,

basically I am trying to build a section, that it will have 3 different parts, and they will be loading one after the other after some seconds, and an animation for the loading will be running at the same time.

Here is the picture to make it more clear.

image

As the line will be loading (increasing width) below the menu items, the text below the line will change too for each menu item.

I am not sure how to implement it. Should I use css keyframes for the animation of the line and then fade-in / out the text based on some delay?

Do I have to use javascript or it can be made with clear css?

2

I’m not quite sure what you are asking.

That looks like a tab structure but I didn’t understand what you were animating exactly.

Is that 3 tabs on the top and then you reveal 3 different content sections based on the tab selected?

Is this like a slideshow that animates 3 content sections automatically?

A tab structure is possible in css but I really need to know the full use case and exactly what gets animated and how it should look?

3

Yes sorry about not being very clear.

“Is that 3 tabs on the top and then you reveal 3 different content sections based on the tab selected?”
this is true.

And I want this to be changed manually when I click a tab, and also automatically, as the bar below the tabs is loading.

Does this makes more sense?

4

Just to be clear here is a very old demo of mine that shows some tab content.

(That’s an old demo and I’d do it differently today but the concept is the same. )

Is that the basis of what you are after?

I’m still not sure what you mean about animation on load or whether you want a continuous slideshow effect etc but maybe the demo will help clarify what you need.

1 Like
5

Yes it’s close. Ok I think that I can manage it with the help of this codepen.

Thanks a lot!

6

Sorry if I hijack the thread but how would you do it differently today? Is there an approach which gets closer to the functionality of your checkbox version, which I know is not semantically correct but I like the cleanliness of it and have used something similar several times in the past.

7

I was mainly talking about the use of floats and the prefixes etc.

I’d use grid or flex for the tab selection rather than floats.

I’d also look at some way of adding keyboard navigation into it. Checkboxes/radios can be tabbed but only if the user knows they are input elements as you need the arrow keys (and/or spacebar) to navigate radio groups rather than the tab key.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.