在微信小程序中设置圆环空间，可以通过以下步骤实现：
创建自定义组件
在小程序工程中创建一个`components`文件夹，用于存放自定义组件。
在`components`文件夹下，新建一个名为`circle-progress`的文件夹，用于存放圆环进度条组件的相关文件，包括`.js`、`.json`、`.wxml`和`.wxss`。
编写组件结构
在`circle-progress`文件夹下，创建`circle-progress.wxml`文件，编写圆环的XML结构。例如：
```xml
```
在`circle-progress.wxss`文件中，编写圆环的样式。例如：
```css
.circle-progress-container {
width: 100px；
height: 100px；
overflow: hidden；
}
.circle-canvas {
width: 100%；
height: 100%；
}
```
编写组件逻辑
在`circle-progress.js`文件中，编写圆环的JavaScript逻辑。例如：
```javascript
Component（{
properties: {
progress: {
type: Number,
value: 0,
observer: function（newVal） {
this.drawCircle（newVal）；
}
},
size: {
type: Number,
value: 100,
observer: function（newVal） {
this.resizeCircle（newVal）；
}
}
},
data: {
ctx: null,
centerX: 0,
centerY: 0,
radius: 0
},
methods: {
onLoad: function（） {
const query = wx.createSelectorQuery（）；
query.select（'circleCanvas'）.fields（{ node: true, size: true }）.exec（（res） => {
const canvas = res.node；
const ctx = canvas.getContext（'2d'）；
const dpr = wx.getSystemInfoSync（）.pixelRatio；
canvas.width = res.width * dpr；
canvas.height = res.height * dpr；
ctx.scale（dpr, dpr）；
this.setData（{
ctx: ctx,
centerX: canvas.width / 2,
centerY: canvas.height / 2,
radius: Math.min（canvas.width, canvas.height） / 2
}）；
this.drawCircle（this.data.progress）；
}）；
},
drawCircle: function（progress） {
const { ctx, centerX, centerY, radius } = this.data；
ctx.clearRect（0, 0, canvas.width, canvas.height）；
ctx.beginPath（）；
ctx.arc（centerX, centerY, radius, 0, 2 * Math.PI * progress / 100）；
ctx.stroke（）；
},
resizeCircle: function（size） {
const { ctx, centerX, centerY, radius } = this.data；
const dpr = wx.getSystemInfoSync（）.pixelRatio；
canvas.width = size * dpr；
canvas.height = size * dpr；
ctx.scale（dpr, dpr）；
this.setData（{
radius: size / 2
}）；
this.drawCircle（this.data.progress）；
}
}
}）；
```
在页面中使用组件
在需要使用圆环进度条的页面中，引入并使用该组件。例如，在`index.wxml`文件中：
```xml
```
在`index.js`文件中，设置进度条的进度和大小。例如：