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

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

代码语言：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+frvhLgAAQuNJREFUeNrs3QmQJNl93/d/ZtbZ9zn3zM7u7GK5B8EVFoZAEhCwS2IhgjooEgatECIkmzZNWT4g28EISSGHZIWtYIQt2TAoU0GBESJAEAExAJE0CBAXQZxccneBBXZ2Z3buq2d6unv6PurK9Htd2d1ZWZl1dF2ZVd9PIDG91T091a+q85f/ly//aTiOIwAiI6G2pLvpj62AP/c207dZvu+197iX7W5eJc/je1vJsxUD/iy4W5GXDIgGg0AHukIHa8rd0r6Pk57NiNnP5XjCXW85teXdzfuxzVsAINCBuNAVcsa3pd0/UwM+NjrUd9yQ3/FtJd46AIEO9Cq4s2obcv/c29IMzaHokN/2bFvunwQ9QKADbaOnwYfd8B52twzD0hW6et90ty33zwLDAhDoQD2mG9gjaht1/0wxLJGip+431Lbu/qlDnvPzAIEOqm8Zc7cRtwo3GJZYcdzqXYf7mrtRxYNAB/pc2q2890KcqfP+tOMJd13J5xgSEOhAvFlucE+obZwAH+iAX1XbihvyLLYDgQ7EwLAb4HrT0+hMocNL7/A23H.........完整代码请登录后点击上方下载按钮下载查看