jquery+css实现加载圆形圆环进度动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：jquery+css实现加载圆形圆环进度动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset='UTF-8'>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
*, :before, :after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: rgba(0,0,0,0.8);
}

body {
  width: 600px;
  height: 100%;
  margin: 0 auto;
  font-family: 'microsoft yahei', cursive;
  color: #333;
}
a{
    text-decoration: none;
}


@keyframes example {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.score_content{
    width: 250px;
    height: 250px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    display: block;
}
.score_gray{
    width:250px;
    height:250px;
    background: #e6e6e7;
    position:absolute;
    border-radius: 50%;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);
    z-index:1;
}
.score_deg{
    width:250px;
    height:250px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMDFDMDk0REVBNDcxMUU3QTJFOEQwQkU2N0UzMkQ4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMDFDMDk0RUVBNDcxMUU3QTJFOEQwQkU2N0UzMkQ4RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwMUMwOTRCRUE0NzExRTdBMkU4RDBCRTY3RTMyRDhGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjEwMUMwOTRDRUE0NzExRTdBMkU4RDBCRTY3RTMyRDhGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+frvhLgAAQuNJREFUeNrs3QmQJNl9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.........完整代码请登录后点击上方下载按钮下载查看