Categoria: UI/UX

Progress bars are a popular way to visualize expertise levels in portfolios. In ReeniClone they blend seamlessly with the dark theme, using pink #FF014F as the fill color and subtle shadows for depth. This tutorial walks through building responsive, animated skill bars without custom code.

Step 1 – Prepare the Data

Decide which skills to display and assign a percentage. Example:

• UI/UX Design – 95%
• Front‑End Development – 90%
• WordPress & Elementor – 92%
• Graphic Design – 85%

Step 2 – Add the Elementor Progress Bar Widget

1. Drag a Progress Bar widget into a column.
2. Set the Title to the skill name.
3. Enter the Percentage (e.g., 95).
4. Under Style → Bar, change the Background Color to #141414 (matching card background).
5. Set the Active Color to #FF014F (brand pink).
6. Enable Animation and set Duration to 1.5 s for a smooth fill.

Step 3 – Create a Consistent Layout

To keep spacing uniform, use the following column settings:

• Width: 100% (full‑width on mobile).
• Padding: 20 px top/bottom, 0 left/right.
• Background: Transparent (the surrounding card will provide the dark backdrop).

Step 4 – Add a Card Wrapper

Wrap each progress bar in an Inner Section widget and apply these styles:

selector {
    background-color: #141414;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

This creates the card look seen across the ReeniClone site.

Step 5 – Make It Responsive

On tablets, display two columns side‑by‑side; on mobile, stack them. Use Elementor’s responsive column width settings (50% on tablet, 100% on mobile).

Step 6 – Optional: Add Hover Interaction

For an extra touch, add a tiny scale‑up on hover:

selector:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

This subtle effect aligns with the site’s other interactive components.

Final Result

You now have a set of animated, brand‑consistent skill bars that convey expertise at a glance. Because everything is built with Elementor’s native widgets, the solution stays lightweight and easy to update.

Conclusion

Interactive progress bars enhance credibility and break up text‑heavy sections. By following the steps above, you can replicate the sleek look of ReeniClone’s skill showcase on any portfolio site.