CSS circle border fill animation

I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle. My need: Width-50px Height -50px border size as per the image file attached -circle border fill sample image

My code

#loading
{   
  width: 100px;  
  height: 100px;  
  margin: 30px auto;
  position: relative;
}

.outer-shadow, .inner-shadow
{
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.inner-shadow 
{
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.hold 
{
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 100px, 100px, 50px);
  border-radius: 100%;
  background-color: #fff;
}

.fill, .dot span 
{
  background-color: #f50;
}

.fill 
{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}

.left .fill 
{
  z-index: 1;
  -webkit-animation: left 1s linear ;
  -moz-animation: left 1s linear ;
  animation: left 1s linear both;  
}

@keyframes left 
{
  0%{-webkit-transform:rotate(0deg);}
  100%{transform:rotate(180deg);}
}

@-webkit-keyframes left 
{
  0%{-webkit-transform:rotate(0deg);}
  100%{-webkit-transform:rotate(180deg);}
}

.right 
{
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.right .fill 
{  
  z-index: 3;
  -webkit-animation: right 1s linear ;
  -moz-animation: right 1s linear ;
  animation: right 1s linear both ;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes right 
{
  0%{-webkit-transform:rotate(0deg);}
  100%{transform:rotate(180deg);}
}

@-webkit-keyframes right 
{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(180deg);}
}

My code in jsfiddle...!

标签： css animation border circle

2条回答

够拽才男人

2楼-- · 2019-04-14 05:37

is this what you expect,hope this will help to you.try this.I only concerned about the circle size of 50 px with inside circle.if this is not the case tell me.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>

<style type="text/css">
  div.circleone{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 1px 2px 1px black;

  }

  div.circletwo
  {
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    box-shadow: 1px -1px 1px black;
    position: relative;
    top: 25%;
    left: 25%;


  }

</style>

</head>

<body>

<div class="circleone">
  <div class="circletwo"></div>
</div>



</body>
</html>

0人赞添加讨论(0) 举报

够拽才男人

3楼-- · 2019-04-14 05:39

You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow,
.inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill,
.dot span {
  background-color: #f50;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'>
  </div>
  <div class='inner-shadow'>
  </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>

</div>

0人赞添加讨论(0) 举报

CSS circle border fill animation

My code

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间