Comments (8)
I defined it, but never use it, I did not work on this lib for a long time, I think it's time to update it. I will update it soon, For now, you can contribute to this or just copy the source code to your project.
Thank you
from vue-loading-spinner.
The issue with the RotateSquare*.vue
components is that you are using pseudo elements which could not be targeted by Vue.js directly.
The only solution I could come up was to use extra elements for the HTML.
Here's my current solution. If you approve it I will update the other components.
Usage
<rotate-square2 background="#abcdef" shadow="#cc0000"></rotate-square2>
Updated code
<template>
<div v-bind:style="styles" class="spinner spinner--rotate-square-2">
<div class="shadow" v-bind:style="shadowStyles"></div>
<div class="square" v-bind:style="squareStyles"></div>
</div>
</template>
<script>
export default {
props: {
size: {
default: '40px'
},
background: {
default: '#41b883'
},
shadow: {
default: '#000'
}
},
computed: {
styles () {
return {
width: this.size,
height: this.size,
}
},
squareStyles() {
return {
background: this.background
}
},
shadowStyles() {
return {
background: this.shadow
}
}
}
}
</script>
<style lang="scss" scoped>
.spinner {
position: relative;
* {
line-height: 0;
box-sizing: border-box;
}
/*&:before {*/
.shadow {
content: '';
width: 100%;
height: 20%;
min-width: 5px;
background: #000;
opacity: 0.1;
position: absolute;
bottom: 0%;
left: 0;
border-radius: 50%;
animation: rotate-square-2-shadow .5s linear infinite;
}
/*&:after {*/
.square {
content: '';
width: 100%;
height: 100%;
background: #41b883;
animation: rotate-square-2-animate .5s linear infinite;
position: absolute;
bottom:40%;
left: 0;
border-radius: 3px;
}
}
@keyframes rotate-square-2-animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(20%) rotate(22.5deg);
}
50% {
transform: translateY(40%) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 50%;
}
75% {
transform: translateY(20%) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes rotate-square-2-shadow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
</style>
from vue-loading-spinner.
That's cool. Use pseudo just to make the template simpler, but cannot be targeted. Please update other element and make PR. Thank you.
from vue-loading-spinner.
Hi @nguyenvanduocit ,
Is there any plan for this issue?
from vue-loading-spinner.
While going through the components I've found out that some of them can't be rebuild without using pseudo classes.
The only possible solution seems to import the scss into the component and use the scss variables directly.
This is a major change in architecture of this package therefore @nguyenvanduocit needs to decide on this issue.
from vue-loading-spinner.
Hi @pixelpeter ,
Thanks for your answer.
Maybe I should copy the source code to my project before @nguyenvanduocit makes this decision.
Anyway, these are awesome spinners.
from vue-loading-spinner.
Pseudo cannot be targeted, but they can inherit: https://jsfiddle.net/3kz598cf/
from vue-loading-spinner.
@prowseed : Cool. This was far beyond my knowledge. Thanks for this hint. I will try it on some components
from vue-loading-spinner.
Related Issues (20)
- Not found CubeGrid in 'vue-loading-spinner' HOT 1
- how install using browserify?
- What license is this code released under? HOT 2
- Not found error HOT 1
- Mikepad (and other spinners) not defined HOT 2
- HourGlass: change color HOT 2
- Unable to use HOT 7
- ThreeDots is not available, do you think there's a problem? HOT 1
- Add LICENSE
- Can't show spinner while main component is loading
- RotateSquare2 background property not working HOT 4
- Isn't this managed anymore? HOT 2
- License and coreui relationship HOT 2
- Is there any development documentation?
- Error in parsing SVG: Unbound namespace prefix: "v-bind" HOT 2
- Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
- Cube amination not working
- can no install, python version error, node-sass HOT 3
- : Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
- Dependency error with node-sass HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-loading-spinner.