circle animation css

YOU.com answered on August 5, 2020 Popularity 8/10 Helpfulness 4/10

answer circle animation css

related circle animation css

related circle css animation

circle animation css

Comment

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  animation: scale 2s infinite ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Popularity 8/10 Helpfulness 4/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

circle animation css

Comment

https://codepen.io/jake-lee/pen/jrJYON

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Feb 15 2023

Tiago F2

0 Answers Avg Quality 2/10

circle animation css

Comment

<style>
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    .load {
        width: 100px;
        height: 100px;
        margin: 110px auto 0;
        border: solid 10px #8822aa;
        border-radius: 50%;
        border-right-color: transparent;
        border-bottom-color: transparent;
        -webkit-transition: all 0.5s ease-in;
        -webkit-animation-name: rotate;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        transition: all 0.5s ease-in;
        animation-name: rotate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
</style>
<div data-loading="" class="load d-none"></div>

Popularity 8/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Feb 15 2023

Tiago F2

0 Answers Avg Quality 2/10

circle css animation

Comment

class ProgressRing extends React.Component {
  constructor(props) {
    super(props);

    const { radius, stroke } = this.props;

    this.normalizedRadius = radius - stroke * 2;
    this.circumference = this.normalizedRadius * 2 * Math.PI;
  }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: css-tricks.com

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Aug 05 2020

Successful Swan

0 Answers Avg Quality 2/10

circle animation css

Contents

More Related Answers

circle animation css

Closely Related Answers

circle animation css

circle animation css

circle css animation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.