Javascript 从四面增加圆

我试图通过javascript增加百分比来实现背景显示

效果应从中间开始，从所有尺寸开始增加

问题：该百分比从中间到底部不断增加，实际上并不影响顶部

备选方案：如果任何人有另一种更简单的方法，这会很有帮助，因为我希望在圆圈内显示背景图像

尝试：

window.onload=function（）{
var计数=假；
功能启动（计数）{
//控制台日志（计数）；
如果（！计数）{
计数=真；
$（'.preload_meter'）。宽度（计数+'%'）；
$（'.preload_meter'）。高度（计数+'%'）；
var timer=setInterval（函数（）{
如果（计数>=0）{
$（'.preload_meter'）。宽度（计数+'%'）；
$（'.preload_meter'）。高度（计数+'%'）；
计数++；
}否则{
清除间隔（计时器）；
计数=参数[0]；
计数=假；
}
}, 100);
}
}
启动（0）；
};
body.preload{
背景：无；
可见性：隐藏；
}
#预紧器{
字体系列：Arial；
字体大小：12px；
能见度：可见；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
高度：自动；
保证金：0；
z指数：99999999；
}
#预加载。预加载编号：之前，
#预加载。预加载进度：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：-webkit径向渐变（圆形，rgba（255，255，255，0.1），rgba（255，255，255，0.01））；
背景图像：-莫兹径向梯度（圆形，rgba（255，255，255，0.1），rgba（255，255，255，0.01））；
背景图像：-ms径向梯度（圆形，rgba（255，255，255，0.1），rgba（255，255，255，0.01））；
背景图像：-o-径向梯度（圆形，rgba（255，255，255，0.1），rgba（255，255，255，0.01））；
背景图像：径向渐变（圆形，rgba（255，255，255，0.1），rgba（255，255，255，0.01））；
}
#预加载程序完成{
不透明度：0；
-webkit过渡：不透明度0.2s线性0.5s；
-moz过渡：不透明度0.2s线性0.5s；
-ms转换：不透明度0.2s线性0.5s；
-o-过渡：不透明度0.2s线性0.5s；
过渡：不透明度0.2s线性0.5s；
}
#预紧器。预紧器线{
高度：2倍；
底部：自动；
}
/*数字模式*/
#预加载程序。预加载程序\数量。预加载程序\百分比{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
宽度：100px；
高度：100px；
边框宽度：1px；
边框样式：实心；
边界半径：50%；
线高：100px；
字体大小：20px；
字体系列：Impact，Arial；
文本阴影：1px1px2pRGBA（0,0,0,0.1）；
文本对齐：居中；
}
#预加载器。预加载器数量。预加载器百分比>div{
位置：绝对位置；
顶部：-2px；
右：-2px；
底部：-2px；
左：-2px；
边框：4px实心透明；
左边框颜色：#FFFFFF；
边界半径：50%；
-webkit动画：旋转0.8s线性无限；
-moz动画：旋转0.8s线性无限；
-ms动画：旋转0.8s线性无限；
-o动画：旋转0.8s线性无限；
动画：旋转0.8s线性无限；
}
/*行模式*/
#预载器。预载器线路。预载器装载器{
位置：绝对位置；
身高：100%；
左：0；
}
#预紧器。预紧器线。预紧器栓{
位置：绝对位置；
右：0；
身高：100%；
宽度：100px；
不透明度：0.5；
}
/*文本模式*/
#preload.preload\u text.preload\u loader{
颜色：#FFFFFF；
位置：绝对位置；
排名：0；
底部：0；
左：50%；
高度：30px；
线高：30px；
保证金：自动；
字母间距：3px；
字体大小：16px；
空白：nowrap；
}
#preload.preload\u text.preload\u loader div{
位置：绝对位置；
顶部：0px；
右：0px；
底部：0px；
左：0%；
背景色：#000000；
不透明度：0.7；
过滤器：α（不透明度=70）；
}
/*缩放文本模式*/
#preload.preload\u scale\u text.preload\u loader{
颜色：#FFFFFF；
位置：绝对位置；
排名：0；
底部：0；
左：50%；
高度：30px；
线高：30px；
保证金：自动；
字母间距：3px；
字体大小：16px；
空白：nowrap；
}
#预加载程序。预加载程序\比例\文本。预加载程序\加载程序范围{
显示：内联块；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
-ms变换：尺度（0）；
-o变换：标度（0）；
变换：比例（0）；
}
#preload.preload\u scale\u text.preload\u loader span.loaded{
-webkit动画：向前缩放0.2秒；
-moz动画：向前缩放0.2秒；
-ms动画：向前缩放0.2秒；
-o形动画：向前缩放0.2秒；
动画：向前缩放0.2秒；
}
/*标志模式*/
#预加载程序。预加载程序\徽标。预加载程序\加载程序{
位置：绝对位置；
左：50%；
最高：50%；
边际：0px；
溢出：隐藏；
背景位置：50%50%；
背景重复：无重复；
背景大小：100%；
边界半径：5px；
}
#预装器。预装器\标志。预装器\装载器分区{
位置：绝对位置；
底部：0%；
左：0px；
右：0px；
身高：100%；
不透明度：0.7；
过滤器：α（不透明度=70）；
}
#预加载程序。预加载程序图标。预加载程序百分比{
位置：绝对位置；
最高：50%；
左：50%；
高度：40px；
线高：40px；
边际：0px；
颜色：#072E77；
文本对齐：居中；
字体系列：Arial；
字体大小：12px；
字体大小：粗体；
}
/*进度模式*/
#预加载。预加载\进度。预加载\百分比{
位置：绝对位置；
最高：50%；
左：0；
右：0；
颜色：#AAAAA；
颜色：rgba（255，255，255，0.1）；
字体系列：Impact，Arial；
字体大小：20px；
文本对齐：居中；
}
#预加载程序。预加载程序\进度。预加载程序\加载程序{
内容：''；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
宽度：100%；
身高：100%；
保证金：-10px自动；
背景色：rgba（0,0,0,0.1）；
}
#预加载。预加载进度。预加载计{
宽度：0；
身高：100%；
保证金：自动；
衬垫
$('.preloader_meter').css('top', 50 - count/2 + '%');