如何在只有css的图像上创建圆形进度条？

-3

我试图在图像上创建一个圆形进度条，如附图所示。如何在只有css的图像上创建圆形进度条？

我喜欢当100％，隐藏进度。任何帮助？

来源

2017-07-07 Andre Pavini

哪里是你代码分享 – Bhargav

把你的代码放在jsfiddle –

您能否为我的回答提供反馈（如果您喜欢，请接受或如果需要其他内容，请发表评论）？ –

有一个插件，这是能够做到的：jQuery.knob。

$(function() { 
 
    $(".knob").knob(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script> 
 
<input class="knob" data-width="150" data-width="100" data-displayInput="false" data-displayPrevious="true" data-fgColor="#87ceeb" data-skin="tron" data-thickness="15" value="75" />

如果你想它的动画，你可以改变输入的value！只需将鼠标放在旋钮上，然后用鼠标滚轮滚动即可。或者在这里看到它的动画：jQuery Knob update value with animate

来源

2017-07-07 11:16:02

嗨Praveen，谢谢，但我不能使用jQuery。我正在使用Ionic projet。我只需要用CSS来完成。 –

@AndrePavini对不起，你将无法使用CSS来完成它。如果你没事的话，你可以使用SVG动画，但即使如此，你也需要使用JavaScript。呃，我们需要找到一些适用于离子的东西。你没有提到那个萌芽！ **不可能使用纯CSS抱歉！ '：（''** –

显然这不是CSS解决方案。 –

你可以使用CSS动画。该解决方案采用动画圈半：

.circle { 
 
    display: inline-flex; 
 
    border-radius: 100%; 
 
    background-image: url("https://i.stack.imgur.com/sRV6Q.jpg"); 
 
    overflow: hidden; 
 
} 
 

 
.circle__half { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.circle__half:before { 
 
    height: inherit; 
 
    width: inherit; 
 
    position: absolute; 
 
    content: ""; 
 
    border-radius: 100px 0 0 100px; 
 
    background-color: lime; 
 
    transform-origin: 100% 50%; 
 
    /* hidden by default */ 
 
    transform: rotate(180deg); 
 
    opacity: 0.65; 
 
    animation-name: rotate-circle-half; 
 
    animation-duration: 4s; 
 
    animation-timing-function: linear; 
 
} 
 

 
.circle__half--right { 
 
    transform: scale(-1, -1); 
 
} 
 

 
.circle .circle__half--right:before { 
 
    animation-name: rotate-circle-half--right; 
 
} 
 

 
/* show half of circle half of the time */ 
 
@keyframes rotate-circle-half { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

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

<div class="circle"> 
 
    <div class="circle__half"></div> 
 
    <div class="circle__half circle__half--right"></div> 
 
</div>

另外如果你想流畅型圈躲在你可以为圆形半添加动画：

.circle { 
 
    display: inline-flex; 
 
    border-radius: 100%; 
 
    background-image: url("https://i.stack.imgur.com/sRV6Q.jpg"); 
 
    overflow: hidden; 
 
} 
 

 
.circle__half { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    animation-name: hide-smoothly; 
 
    animation-duration: 2s; 
 
    animation-delay: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.circle__half:before { 
 
    height: inherit; 
 
    width: inherit; 
 
    position: absolute; 
 
    content: ""; 
 
    border-radius: 100px 0 0 100px; 
 
    background-color: lime; 
 
    transform-origin: 100% 50%; 
 
    /* hidden by default */ 
 
    transform: rotate(180deg); 
 
    opacity: 0.65; 
 
    animation-name: rotate-circle-half; 
 
    animation-duration: 4s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.circle__half--right { 
 
    transform: scale(-1, -1); 
 
} 
 

 
.circle .circle__half--right:before { 
 
    animation-name: rotate-circle-half--right; 
 
} 
 

 
/* show half of circle half of the time */ 
 
@keyframes rotate-circle-half { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

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

 
@keyframes hide-smoothly { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="circle"> 
 
    <div class="circle__half"></div> 
 
    <div class="circle__half circle__half--right"></div> 
 
</div>

来源

2017-07-07 15:34:07

如何在只有css的图像上创建圆形进度条？

回答

相关问题