Skip to content

W
web-music

OpenDocCN / web-music

通知 7
Star 0
Fork 0
W
web-music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ebd5ac28 编写于 作者: 阿 阿炸克斯
浏览文件
操作

新增loading加载

上级 72957960
隐藏空白更改
内联 并排
Showing with 99 addition and 4 deletion
app/css/base.css
浏览文件 @ ebd5ac28
......@@ -100,7 +100,8 @@ table {
right: 0;
height: 45px;
box-shadow: 0 0 5px #ccc;
background-color: #fff; }
background-color: #fff;
z-index: 10; }
.header-search input {
width: 100%;
height: 100%;
......@@ -231,3 +232,50 @@ table {
width: 150px;
margin: 10px auto;
display: block; }
.loading-wrap {
text-align: center;
font-size: 14px;
color: #ccc;
margin-top: 100px; }
.loading-wrap .first-loading {
position: relative;
width: 50px;
/*no*/
height: 50px;
/*no*/
border: 2px solid #ccc;
/*no*/
border-radius: 50%;
border-left: 2px solid transparent;
/*no*/
box-sizing: border-box;
padding: 0;
margin: 0 auto 10px;
display: block;
animation: loading 1s linear infinite; }
.loading-wrap .first-loading:after {
position: absolute;
content: "";
top: -2px;
/*no*/
left: -2px;
/*no*/
bottom: -2px;
/*no*/
right: -2px;
/*no*/
border: 2px solid transparent;
/*no*/
border-radius: 50%;
border-left: 2px solid #ccc;
/*no*/
box-sizing: border-box;
transform-origin: center center;
transform: rotate(50deg); }
@keyframes loading {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
app/css/base.scss
浏览文件 @ ebd5ac28
......@@ -22,6 +22,7 @@ $bottom-height: 80px;
height: $top-height;
box-shadow: 0 0 5px #ccc;
background-color: #fff;
z-index: 10;
input {
width: 100%;
......@@ -201,3 +202,48 @@ $bottom-height: 80px;
display: block;
}
}
.loading-wrap {
text-align: center;
font-size: 14px;
color: #ccc;
margin-top: 100px;
.first-loading {
position: relative;
width: 50px; /*no*/
height: 50px; /*no*/
border: 2px solid #ccc; /*no*/
border-radius: 50%;
border-left: 2px solid transparent; /*no*/
box-sizing: border-box;
padding: 0;
margin: 0 auto 10px;
display: block;
animation: loading 1s linear infinite;
}
.first-loading:after {
position: absolute;
content: "";
top: -2px; /*no*/
left: -2px; /*no*/
bottom: -2px; /*no*/
right: -2px; /*no*/
border: 2px solid transparent; /*no*/
border-radius: 50%;
border-left: 2px solid #ccc; /*no*/
box-sizing: border-box;
transform-origin: center center;
transform: rotate(50deg);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
app/index.html
浏览文件 @ ebd5ac28
......@@ -6,9 +6,6 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>听音乐</title>
<link
href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Rosario:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&amp;subset=latin,latin-ext"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./css/base.css">
</head>
<body>
......@@ -17,6 +14,10 @@
<div class="header-search">
<input type="text" @input="search" placeholder="请输入要搜索的歌曲名称">
</div>
<div class="loading-wrap" v-show="list.length === 0">
<div class="first-loading"></div>
<div>加载中，请稍后</div>
</div>
<!--列表-->
<div class="music-list">
<div class="item"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或