devgiordane · October 24, 2020 17:05
diff --git a/load.html b/load.html

 <!DOCTYPE html>
 <html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS load API</title>
    <style>
      body {
        font-family: sans-serif;
        color: #fff;
        background: #757575;
      }
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      li {
        padding: 5px;
        list-style: none;
      }
      #app {
        display: flex;
        flex-direction: column;
      }
      button {
        font-size: 26px;
        color: #fff;
        height: 50px;
        background: #7c4dff;
        border: none;
        border-radius: 50vh;
      }

      .load {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .spin {
        background: #00000020;
        height: 150px;
        width: 150px;
        border-radius: 50vh;
        border: 5px solid #00000000;
        border-top: 5px solid #fff;
        animation: loading 3s linear infinite;
      }
      .loading {
        position: absolute;
        color: #fff;
      }
      @keyframes loading {
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-show="showLoad" class="load">
        <div class="spin"></div>
        <div class="loading">CARREGANDO</div>
      </div>
      <button v-on:click="loadApi()">CARREGAR FOTOS</button>
      <ul>
        <li v-for="img in api"><img :src="img.thumbnailUrl" alt="" /></li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
          api: [],
          showLoad: false
        },
        methods: {
          loadApi: async function() {
            this.showLoad = true;
            try {
              const response = await axios.get(
                "https://jsonplaceholder.typicode.com/photos"
              );
              console.log(response.data);
              this.api = response.data;
            } catch (error) {
              console.error(error);
            } finally {
              this.showLoad = false;
            }
          }
        }
      });
    </script>
  </body>
 </html>

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>CSS load API</title>
	<style>
	body {
	font-family: sans-serif;
	color: #fff;
	background: #757575;
	}
	ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}
	li {
	padding: 5px;
	list-style: none;
	}
	#app {
	display: flex;
	flex-direction: column;
	}
	button {
	font-size: 26px;
	color: #fff;
	height: 50px;
	background: #7c4dff;
	border: none;
	border-radius: 50vh;
	}

	.load {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.spin {
	background: #00000020;
	height: 150px;
	width: 150px;
	border-radius: 50vh;
	border: 5px solid #00000000;
	border-top: 5px solid #fff;
	animation: loading 3s linear infinite;
	}
	.loading {
	position: absolute;
	color: #fff;
	}
	@keyframes loading {
	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div id="app">
	<div v-show="showLoad" class="load">
	<div class="spin"></div>
	<div class="loading">CARREGANDO</div>
	</div>
	<button v-on:click="loadApi()">CARREGAR FOTOS</button>
	<ul>
	<li v-for="img in api"><img :src="img.thumbnailUrl" alt="" /></li>
	</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
	var app = new Vue({
	el: "#app",
	data: {
	message: "Hello Vue!",
	api: [],
	showLoad: false
	},
	methods: {
	loadApi: async function() {
	this.showLoad = true;
	try {
	const response = await axios.get(
	"https://jsonplaceholder.typicode.com/photos"
	);
	console.log(response.data);
	this.api = response.data;
	} catch (error) {
	console.error(error);
	} finally {
	this.showLoad = false;
	}
	}
	}
	});
	</script>
	</body>
	</html>