有需求,就要动手丰衣足食...公司考虑兼容IE9,那么css3 animation
写的loading就无缘了
因为keyframes
IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下svg
大佬了;
依旧不废话,看效果图
先说说实现的思路
fixed
,一个是相对relative
的absolute
,所以这块抽离svg代码
渲染,图片引入是没法更改的你能学到什么?
props
的字段限制,默认值computed
的运用svg
一丢丢知识大体就这样了,再来说说爬的坑
svg
可以继承颜色和大小(css),前提哈,svg
内置代码没有fill(填充的颜色)
,width
,height
,所以要删除掉那三个属性, 上码// 记得删除,一般用软件生成的svg导出都有带这些属性,删除后默认为黑色
<svg class="icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="red">
<path transform="translate(-8 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
<animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(2 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
<animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(12 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
<animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(24 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12">
<animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</path>
</svg>
vue-cli
默认的配置写了会把svg
转为base64
, 解决方案是拆开,引入一个raw-loader
,可以保证svg
代码不会转化为url或者base64,上码 {
test: /\.(png|jpe?g|gif)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
{
test: /\.(svg)(\?.*)?$/,
loader: "raw-loader",
}复制代码
有什么特性!
svg
大小,颜色,类型可控// 引入所有svg loading
export { default as balls } from "./loading-balls.svg";
export { default as bars } from "./loading-bars.svg";
export { default as bubbles } from "./loading-bubbles.svg";
export { default as cubes } from "./loading-cubes.svg";
export { default as cylong } from "./loading-cylon.svg";
export { default as cylongred } from "./loading-cylon-red.svg";
export { default as spin } from "./loading-spin.svg";
export { default as spinning } from "./loading-spinning-bubbles.svg";
export { default as spokes } from "./loading-spokes.svg";
<template>
<div class="loading-layout" :style="layoutLoadingStyle">
<div class="loading">
<p v-html="svgShow" :style="svgStyle"></p>
<p class="loadingText" :style="{color:svgColor}" v-if="showText">{{loadingText}}</p>
</div>
</div>
</template>
<script>
// 引入所有svg loading
import * as allsvg from './svg';
export default {
name: 'loading',
data: function () {
return {}
},
props: {
svgType: {
type: String, // 字符串类型
default: 'bars' // 默认的loading图形
},
svgColor: {
type: String,
default: '#20a0ff'
},
svgSize: {
type: Object, // 对象类型
default: function () {
return {
width: '50px',
height: '50px'
}
}
},
showText:{ // 是否显示loading文本
type: Boolean,
default:false,
},
loadingText: {
type: String,
default: '拼命加载中....'
},
lbgColor: { // loading包裹层的样式
type: Object,
default: function () {
return {
color: 'rgba(255,255,255,.5)'
}
}
},
lsize: {
type: Object, // 对象类型
default: function () {
return {
width: '100%',
height: '100%'
}
}
},
lpos: {
type: Object,
default: function () {
return { // 遮罩层初始化位置
position: 'absolute',
top: '0',
left: '0'
}
}
}
},
computed: {
svgShow () {
return allsvg[this.svgType];
},
svgStyle () {
return { fill: this.svgColor, width: this.svgSize.width, height: this.svgSize.height }
},
layoutLoadingStyle () {
return {
position: this.lpos.position,
top: this.lpos.top,
left: this.lpos.left,
width: this.lsize.width,
height: this.lsize.height,
'background-color': this.lbgColor.color
}
}
}
}
</script>
<style scoped lang="scss">
.loading-layout {
position: relative;
height: 100%;
width: 100%;
z-index: 2001;
.loading {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
text-align: center;
p {
margin: 0 auto;
}
svg {
fill: inherit;
height: inherit;
width: inherit;
}
}
.loadingText {
white-space: nowrap;
}
}
</style>
自此,一个不大靠谱的loading组件就实现了..有更好的方案和实现思路可以往下面留言...
浪里个浪~~~