Circle Animation, Elementor, CSS
Create a circle with rotating text and icon 100% responsive
SHARE
How you can create the rotating Text Circle
1. Important settings in Elementor and CSS Code
Icon and Text-Path Wrapper – Container Settings:
- Layout Tab
- Full width
- Columns vertical
- Justify content center
- Align items : center
- Set Gaps to 0
- Overflow : hidden
- Style Tab
- Set a background color for the rotating circle
- Set the border-radius: 50%
- Advanced Tab
- Set Margin and padding to zero
- Set Position to Absolute
- Add you CSS class name: In my example and in the code provided it is “circle-container”
Add the CSS Code below in the Custom CSS in the widget or on your Elementor Websites custom CSS Section:
.circle-container {
width: 15vw; /* Size of the circle */
height: 15vw;
}
@media (max-width: 768px) {
/* You can add specific CSS rules for tablets here */
.circle-container {
width: 25vw;
height: 25vw;
}
}
/* Mobile design (480px and smaller) */
@media (max-width: 480px) {
/* You can add specific CSS rules for mobile here */
.circle-container {
width: 30vw;
height: 30vw;
/* Additional mobile-specific styles */
}
}
Text Path Widget settings:
- Content Tab
- Add your Text
- Set Path Type: Circle
- Style Tab
- Size: 100%
- Chose Typography Font Family
- Adapt Size to circle
- Color: Optional
- Advanced Tab
- Padding: % 15
- Width: Full Width
- Position: Absolut
- Add your Class: in my example it is “text-path”
- Add CSS Code: This code will make sure that it will always be a square and it will let the circle rotate
.text-path {
width: 100%;
height: 100%;
position: absolute;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Icon Widget Settings:
- Content Tab
- Select your Icon
- Alignement: Center
- Set Primary and optional also Secondary color
- Advanced Tab
- Width: Inline (auto)
- Set size for icons on all devices in vw
- Give it a class: “play-icon”
- Add Custom CSS: This needs to be added because the icon has a small padding on the bottom, otherwise it is not 100% centered
.play-icon {
line-height: 0 !important;
}
