Tips for preserving border-radius while animating the size of an element

I am trying to achieve a carousel indicator animation where the list item pops out to zero radius in a circular shape. However, my current attempt results in the list item animating in a square shape instead. Is there a way to make it appear in a circular shape?

$('li').click(function(sender) {
  $('.active').removeClass('active');
  $(this).addClass('active');
})
.carousel-indicators li {
  width: 12px;
  border-radius: 12px;
  border-color: #2E8B57 !important;
  height: 24px;
  border-width: 1pt;
  margin: 1px 3px 1px 3px;
  padding: 1px;
  transition: opacity 0.6s ease, background-size 1s ease;
  background-image: linear-gradient(#2E8B57, #2E8B57);
  background-position: center;
  background-size: 0% 0%;
  background-repeat: no-repeat;
}

.carousel-indicators li.active {
  //background-color: #2E8B57;
  border-radius: 12px;
  background-image: linear-gradient(#2E8B57, #2E8B57);
  background-size: 100% 100%;
  background-clip: content-box, padding-box;
  padding: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

cssbootstrap-4carousel

Answer №1

I successfully tackled this issue by implementing radial-gradient technique as suggested in this resource

$('li').click(function(sender) {
  $('.active').removeClass('active');
  $(this).addClass('active');
})
.carousel-indicators li {
  width: 12px;
  border-radius: 12px;
  border-color: #2E8B57 !important;
  height: 24px;
  border-width: 1pt;
  margin: 1px 3px 1px 3px;
  padding: 1px;
  transition: opacity 0.6s ease, background-size 1s ease;
  background-image: radial-gradient(circle, #2E8B57 50%, transparent 51%);
  background-position: center;
  background-size: 0% 0%;
  background-repeat: no-repeat;
}

.carousel-indicators li.active {
  //background-color: #2E8B57;
  border-radius: 12px;
  background-image: radial-gradient(circle, #2E8B57 50%, transparent 91%);
  background-size: 100% 100%;
  background-clip: content-box, padding-box;
  padding: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scaling Youtube video backgrounds with Squarespace

How can I inject a code into Squarespace to scale a video as the background and still keep the navigation functional? Here is the current code I am using: <div style="position: fixed; z-index: 50; width: 100%; height: 100%"> <iframe frameborder= ...

htmlcssiframe

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Before we delve into the details, I invite you to take a look at this fiddle using IE7. It's quite intricate and not something I want to repeat here. The main issue is that clicking on the red block should display additional information. The top row ...

cssinternet-explorerinternet-explorer-7

Resolve the issue of text overflow in PrimeNG Turbo Table cells

When utilizing Primeng table and enabling the scrollable feature, the table is expected to display a scrollbar while ensuring that the text within the cells does not overflow. Unfortunately, this expected behavior is not occurring. To see an example of th ...

cssangularresponsive-designprimengprimeng-turbotable

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

Continue scrolling down until the bottom of the page touches the top

I am currently working on a portfolio project where I want the page to scroll all the way down until the footer image aligns perfectly with the top image. This will create a seamless merging of the header and footer images. Despite searching extensively o ...

javascripthtmlcssscroll

Troubleshooting why custom CSS is failing to load on a specific page in WordPress

I've been attempting to modify some CSS for a specific Wordpress page by adding .page-id-# before the new CSS rule, but for some reason, it's not working. I've tried various selectors, using !important, switching browsers, checking the ID, a ...

htmlcsswordpress

Consistent column height across each row

Currently, I am utilizing bootstrap and jquery to accomplish a specific task. My goal is to select the first child class after all columns on the webpage. var one = $(".col-x .some-class") Afterwards, I aim to obtain the height of all elements with the . ...

javascriptjqueryhtmlcsstwitter-bootstrap

A guide on how to align Hamburger CSS in the center, center text, and include a

For a while now, I've been attempting to achieve three specific things with a Hamburger menu, but so far, I've had no luck. This Hamburger menu is responsive, transitioning into an X symbol upon clicking and moving to the right of the page with a ...

htmlcss

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

javascripthtmljquerycss

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

The inconsistency in div sizes may be attributed to the line-height setting

I'm trying to get two divs to sit next to each other and be aligned at the bottom. However, when I add a button and set the line-height, it drops slightly. See examples with images below. My Desired Layout: https://i.sstatic.net/MZQvg.png Current I ...

htmlcss

The web element cannot be located, but it becomes visible when manually inspected

https://i.sstatic.net/wQxLk.png I'm facing an issue with accessing this menu in selenium as the web element doesn't show up in the inspector until I do it manually. <a id="cke_3275" class="cke_menubutton cke_menubutton__table c ...

pythonhtmlcssseleniumautomation

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

cssreactjs

What is the method for smoothly transitioning the vertical flip of an image within its current position using CSS?

Can someone help me figure out how to smoothly flip my image vertically using rotateX after a few minutes at its center position? The image is flipping, but not on its actual center. It seems to be rotating from a point above the image. I've tried adj ...

javascripthtmlcssbootstrap-4

Modify the appearance of the username in the header after logging in with Yii

As a fellow coder using Yii, I'm seeking assistance in changing the style of my username displayed in the header upon login. Currently, it's appearing in black color and I desire it to be italicized-white. The code snippet below shows my header s ...

phpcssyii

What is the best way to adjust the width of the <span> element in an Angular application?

This snippet showcases a piece of HTML code. <div class="col-md-8"> <span class="label">Product Name</span> <span> <mat-form-field> <input matInput formControlName="productName"> </mat-form ...

htmlcssangular

Basic selection menu layout

I have put together a basic menu for my WordPress site without relying on classes or IDs: <div class="main-menu"> <nav> <ul> <li> <a href="#" class="menu-link">home</a> ...

javascriptjquerycss

Placing text on top of an image in HTML

I am currently working on creating a responsive grid using HTML and CSS. My goal is to have the text 'Top left' displayed within the image, similar to the example shown at https://www.w3schools.com/howto/howto_css_image_text.asp. However, I am fa ...

htmlcssresponsive