Skip to content

Instantly share code, notes, and snippets.

@jkirira

jkirira/index.html

Last active March 2, 2022 10:18
Show Gist options
  • Save jkirira/8bef2f12a775550282016b991baab389 to your computer and use it in GitHub Desktop.
Save jkirira/8bef2f12a775550282016b991baab389 to your computer and use it in GitHub Desktop.
Download ZIP
Vue with plain css loader
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>codesandbox</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
loader.vue
<template>
<div>
<button @click="showLoader">open modal</button>
<div v-if="loading" class="loading">
<div class="lds-dual-ring"></div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
loading: false,
}),
methods: {
showLoader() {
this.loading = !this.loading;
setTimeout(()=>{
this.loading = !this.loading;
}, 3000)
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.loading {
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background: #333;
display: flex;
align-items: center;
justify-content: center;
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid;
border-color: yellow transparent yellow transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment