效果圖如下：
一、在assets下新建一個mycss.css文件夾（圖片大小以及文字樣式，可以根據自己的需求進行微調）
.el-loading-spinner {
/*這個是自己想設置的 gif 加載動圖*/
background-image: url('../gif2.gif');
background-repeat: no-repeat;
background-size: 120px 100px;
height: 100px;
width: 100%;
background-position: center;
/*覆蓋 element-ui 默認的 50% 因為此處設置了height:100%,所以不設置的話，會只顯示一半，因為被top頂下去了*/
top: 40%;
}
.el-loading-spinner .circular {
/*隱藏 之前 element-ui 默認的 loading 動畫*/
display: none;
}
.el-loading-spinner .el-loading-text {
/*為了讓文字在loading圖下面*/
margin: 106px 0px;
color: #da70a0;
}
二、在main.js中引入mycss.css(注意此樣式需要放在elementui樣式后面)
文章來源：http://www.zghlxwxcb.cn/news/detail-565117.html
三、頁面使用注意：使用了自定義的加載圖片，就不要再使用element-loading-spinner="xxx"這個屬性來定義加載圖標，否則會顯示兩個加載圖標文章來源地址http://www.zghlxwxcb.cn/news/detail-565117.html
<template>
<div v-loading="loading" element-loading-text="拼命加載中">
.....
</div>
</template>
<script>
export default {
data(){
return{
loading:false,
}
}
}
</script>
<style lang="scss" scoped></style>
到了這里，關于elementui自定義loading圖標的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
