用el-loading写一个当前有200条数据，已经删除了20条数据的loading效果

你可以使用 Element UI 的 Loading 组件来实现loading效果，具体步骤如下：

1. 在页面中引入 Element UI 库和样式文件：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在代码中定义一个变量，用于存储已删除的数据条数：

data() {
  return {
    deletedCount: 20
  }
}

3. 在需要显示loading效果的按钮或事件中，使用 Loading 组件包裹需要执行的代码，并将已删除的数据条数传入：

<el-button @click="deleteData" type="primary">删除数据</el-button>
...
deleteData() {
  this.$loading({
    lock: true,
    text: '删除中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'my-loading',
    target: '.my-loading',
    fullscreen: false
  });
  // 模拟删除数据的操作
  setTimeout(() => {
    // 更新已删除的数据条数
    this.deletedCount += 20;
    this.$loading.close();
  }, 2000);
}

4. 在 Loading 组件中通过插槽自定义 loading 效果。可以根据已删除的数据条数计算出当前进度，然后在插槽中显示进度条：

<template>
  <div class="my-loading">
    <div class="loading-progress">
      <el-progress :percentage="(deletedCount / 200) * 100" :stroke-width="10" :text-inside="true"></el-progress>
    </div>
  </div>
</template>

完整的代码示例如下：

<template>
  <div>
    <el-button @click="deleteData" type="primary">删除数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deletedCount: 20
    }
  },
  methods: {
    deleteData() {
      this.$loading({
        lock: true,
        text: '删除中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'my-loading',
        target: '.my-loading',
        fullscreen: false
      });
      // 模拟删除数据的操作
      setTimeout(() => {
        // 更新已删除的数据条数
        this.deletedCount += 20;
        this.$loading.close();
      }, 2000);
    }
  }
}
</script>

<style>
.my-loading {
  position: relative;
}
.loading-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<template>
  <div class="my-loading">
    <div class="loading-progress">
      <el-progress :percentage="(deletedCount / 200) * 100" :stroke-width="10" :text-inside="true"></el-progress>
    </div>
  </div>
</template>