Spinner laden in Youtube-Suchmaschine

Ich habe Youtube-Suchmaschine, um nach Videos von Youtube API suchen, und es funktioniert gut, ich möchte einen Spinner laden während des Suchvorgangs machen. Ich fand diese Spinner: http://codepen.io/strick/pen/LVWWMp, aber ich weiß nicht, wie ich es während des Suchvorgangs beginnen Umsetzung, wie ich es brauchen auf anderen Hintergrund erscheinen, dass die SeiteSpinner laden in Youtube-Suchmaschine

meine html verstecken:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Search</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/script.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>Search</h1> 
      <p>Search the YouTube Videos</p> 
     </header> 

     <section> 
      <form id="search-form" name="search-form" onsubmit="return search()"> 
       <div class="fieldcontainer"> 
       <input type="search" id="query" class="search-field" placeholder="search here...."></input> 
       <input type="submit" name="search-btn" id="search-btn" value=""></input> 
       </div> 
      </form> 
      <ul id="results"></ul> 
      <div id="buttons"></div> 
     </section> 
<div class="spinner"> 
    <div class="dot1"></div> 
    <div class="dot2"></div> 
</div> 
    <footer> 
     <p>copyright &copy; 2016, All right received</p> 
    </footer> 
    </div> 
</body> 
</html>

CSS:

*{ 
    padding: 0; 
    margin: 0; 
} 

body{ 
    font-family: "segoue",sans-serif; 
    line-height: 1.6em; 
    color: #666; 
    background: #eb5256 url(../img/creampapter.png); 
    font-size: 14px; 
} 

a{ 
    color: #333; 
    text-decoration: none; 

} 
#container{ 
    width: 740px; 
    background: #fff; 
    margin: auto; 
} 
.clearfix{ 
    clear: both; 
} 

header{ 
    padding: 30px 20px; 
    background: #f4f4f4; 

} 

header h1{ 
    color:#000; 
    margin-bottom: 5px; 
} 
section{ 
    padding: 30px 20px 20px 20px; 

} 
footer{ 
    padding: 20px; 
    background: #f4f4f4; 
    text-align: center; 
} 
#search-form{ 
    display: block; 
    margin-bottom: 15px; 
} 
.fieldcontainer{ 
    display: block; 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
} 

.search-field{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    display: block; 
    width: 45%; 
    padding: 11px 7px; 
    padding-right: 43px; 
    background-color: #fff; 
    color: #ccc; 
    border: 1px solid #c8c8c8; 
    border-bottom-color: #d2e2e7; 
    font-size: 1.6em; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 

} 
#search-btn{ 
    position:absolute; 
    right:360px; 
    top:5px; 
    height:32px; 
    width:32px; 
    border:0; 
    cursor:pointer; 
    zoom:1; 
    filter:alpha(opacity=65); 
    opacity:0.65; 
    background:transparent url(../img/search.png) left no-repeat; 
} 
#search-btn:hover{ 
    filter:alpha(opacity=90); 
    opacity: 0.9; 
} 
#results li{ 
    padding: 10px 0; 
    border-bottom: 1px #ccc dotted; 
    list-style: none; 
    overflow: auto; 
} 
.list-left{ 
    float: left; 
    width: 20%; 
} 
.list-left img{ 
    width:100%; 
    padding: 5px; 
    border: solid #ccc 1px; 
} 

.list-righ{ 
    float: right; 
    width: 78%; 
} 
.cTitle{ 
    color:#dd2826; 
} 
.button-container{ 
    margin-top: 25px; 
} 
.paging-button{ 
    background: #f4f4f4; 
    padding: 8px 13px; 
    border: #ccc 1px solid; 
    border-radius: 5px; 
    color: #333; 
    margin: 10px; 
    cursor: pointer; 
} 
.spinner { 
    margin: 100px auto; 
    width: 90px; 
    height: 90px; 
    position: relative; 
    text-align: center; 
    -webkit-animation: rotate 2.0s infinite linear; 
    animation: rotate 2.0s infinite linear; 
} 

.dot1, 
.dot2 { 
    width: 60%; 
    height: 60%; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    background-color: #67CF22; 
    border-radius: 100%; 
    -webkit-animation: bounce 2.0s infinite ease-in-out; 
    animation: bounce 2.0s infinite ease-in-out; 
} 

.dot2 { 
    top: auto; 
    bottom: 0px; 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

@-webkit-keyframes rotate { 
    100% { 
    -webkit-transform: rotate(360deg) 
    } 
} 

@keyframes rotate { 
    100% { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg) 
    } 
} 

@-webkit-keyframes bounce { 
    0%, 100% { 
    -webkit-transform: scale(0.0) 
    } 
    50% { 
    -webkit-transform: scale(1.0) 
    } 
} 

@keyframes bounce { 
    0%, 100% { 
    transform: scale(0.0); 
    -webkit-transform: scale(0.0); 
    } 
    50% { 
    transform: scale(1.0); 
    -webkit-transform: scale(1.0); 
    } 
}

JS:

//search bar hander hesham 

$(function(){ 
    var searchField = $('#query'); 
    var icon = $('#search-btn'); 

    //focus handler 

    $(searchField).on('focus',function(){ 
     $(this).animate({ 
      width:'100%' 
     },400); 

     $(icon).animate({right:'10px'},400) 
    }); 

    //blur event 
    $(searchField).on('blur',function(){ 
     if(searchField.val()==''){ 
      $(searchField).animate({width:'45%'},400); 
      $(icon).animate({right:'360px'},400); 
     } 
    }); 
$('#search-form').submit(function(e){ 
    e.preventDefault(); 
}); 
}) 

function search(){ 
    // clear results 

    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 

    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 

      } 
     ); 
} 

//next page function 

function nextPage(){ 

    var token = $('#next-button').data('token'); 
    var q = $('#next-button').data('query'); 
    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 

    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      pageToken: token, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 

      } 
     ); 

} 

function prevPage(){ 

    var token = $('#prev-button').data('token'); 
    var q = $('#prev-button').data('query'); 
    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 
showSpinner(); 
    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      pageToken: token, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
        hideSpinner(); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 

      } 
     ); 

} 
/// build output 

function getOutput(item){ 

    var videoId = item.id.videoId; 
    var title = item.snippet.title; 
    var description = item.snippet.description; 
    var thumb = item.snippet.thumbnails.high.url; 
    var channelTitle = item.snippet.channelTitle; 
    var videoDate = item.snippet.publishedAt; 

    //build output string 

    var output = '<li>'+ 
    '<div class="list-left">'+ 
    '<img src="'+thumb+'">'+ 
    '</div>'+ 
    '<div class="list-right">'+ 
    '<h3>'+title+'</h3>'+ 
    '<small>By <span class="cTitle">'+channelTitle+'</span> On '+videoDate+'</small>'+ 
    '<p>'+description+'</p>'+ 
    '</div>'+ 
    '</li>'+ 
    '<div class="clearfix"></div>'+ 
    ''; 
return output; 
} 

//build the buttons 

function getButtons(prevPageToken,nextPageToken){ 
    if(!prevPageToken){ 
     var btnoutput = '<div class="button-container">'+ 
         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+ 
         'onclick="nextPage();">Next Page</button></div >'; 


    }else{ 
     var btnoutput = '<div class="button-container">'+ 
         '<button id="prev-button" class="paging-button" data-token="'+prevPageToken+'" data-query="'+q+'"'+ 
         'onclick="prevPage();">Previous Page</button>'+ 
         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+ 
         'onclick="nextPage();">Next Page</button></div >'; 
    } 

    return btnoutput; 
} 

function showSpinner() { 
    if($(".spinner").length == 0) { 
    $("#container").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>"); 
    } 
    $(".backdrop").show(); 
} 

function hideSpinner() { 
    $(".backdrop").hide(); 
}

Quelle

2016-06-24 Cwalavice

Sie sollten 2 erstellen mehr Methoden -> showSpinner und hideSpinner

function showSpinner() { 
    if($(".spinner").length == 0) { 
    $("#container").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>"); 
    } 
    $(".backdrop").show(); 
} 

function hideSpinner() { 
    $(".backdrop").hide(); 
}

dann nur showSpinner aufrufen, bevor $.get() und rufen hideSpinner nach $("#results").append Anruf

vergessen Sie nicht, CSS zu dem Hintergrund hinzufügen (position: fixed; top: 0; links: 0; Breite: 100%; height: 100%) und kopieren Arten von Spinnern

Quelle

2016-06-24 16:02:31

Ich tat, was Sie gesagt haben, aber es ich sehe immer noch den Spinner ohne Suchtaste. Ich habe die Frage mit den neuen Bearbeitungen bearbeitet – Cwalavice

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Search</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/script.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>Search</h1> 
      <p>Search the YouTube Videos</p> 
     </header> 

     <section> 
      <form id="search-form" name="search-form" onsubmit="return search()"> 
       <div class="fieldcontainer"> 
       <input type="search" id="query" class="search-field" placeholder="search here...."></input> 
       <input type="submit" name="search-btn" id="search-btn" value=""></input> 
       </div> 
      </form> 
      <ul id="results"></ul> 
      <div id="buttons"></div> 
     </section> 
    <footer> 
     <p>copyright &copy; 2016, All right received</p> 
    </footer> 
    </div> 
</body> 
</html>

CSS

*{ 
    padding: 0; 
    margin: 0; 
} 

body{ 
    font-family: "segoue",sans-serif; 
    line-height: 1.6em; 
    color: #666; 
    background: #eb5256 url(../img/creampapter.png); 
    font-size: 14px; 
} 

a{ 
    color: #333; 
    text-decoration: none; 

} 
#container{ 
    width: 740px; 
    background: #fff; 
    margin: auto; 
} 
.clearfix{ 
    clear: both; 
} 

header{ 
    padding: 30px 20px; 
    background: #f4f4f4; 

} 

header h1{ 
    color:#000; 
    margin-bottom: 5px; 
} 
section{ 
    padding: 30px 20px 20px 20px; 

} 
footer{ 
    padding: 20px; 
    background: #f4f4f4; 
    text-align: center; 
} 
#search-form{ 
    display: block; 
    margin-bottom: 15px; 
} 
.fieldcontainer{ 
    display: block; 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
} 

.search-field{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    display: block; 
    width: 45%; 
    padding: 11px 7px; 
    padding-right: 43px; 
    background-color: #fff; 
    color: #ccc; 
    border: 1px solid #c8c8c8; 
    border-bottom-color: #d2e2e7; 
    font-size: 1.6em; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0; 

} 
#search-btn{ 
    position:absolute; 
    right:360px; 
    top:5px; 
    height:32px; 
    width:32px; 
    border:0; 
    cursor:pointer; 
    zoom:1; 
    filter:alpha(opacity=65); 
    opacity:0.65; 
    background:transparent url(../img/search.png) left no-repeat; 
} 
#search-btn:hover{ 
    filter:alpha(opacity=90); 
    opacity: 0.9; 
} 
#results li{ 
    padding: 10px 0; 
    border-bottom: 1px #ccc dotted; 
    list-style: none; 
    overflow: auto; 
} 
.list-left{ 
    float: left; 
    width: 20%; 
} 
.list-left img{ 
    width:100%; 
    padding: 5px; 
    border: solid #ccc 1px; 
} 

.list-righ{ 
    float: right; 
    width: 78%; 
} 
.cTitle{ 
    color:#dd2826; 
} 
.button-container{ 
    margin-top: 25px; 
} 
.paging-button{ 
    background: #f4f4f4; 
    padding: 8px 13px; 
    border: #ccc 1px solid; 
    border-radius: 5px; 
    color: #333; 
    margin: 10px; 
    cursor: pointer; 
} 
.backdrop { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    -moz-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    align-items: center; 
    -webkit-pointer-events:none; 
    pointer-events:none; 
} 
.spinner { 
    margin: 100px auto; 
    width: 90px; 
    height: 90px; 
    position: relative; 
    text-align: center; 
    -webkit-animation: rotate 2.0s infinite linear; 
    animation: rotate 2.0s infinite linear; 
} 

.dot1, 
.dot2 { 
    width: 60%; 
    height: 60%; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    background-color: #67CF22; 
    border-radius: 100%; 
    -webkit-animation: bounce 2.0s infinite ease-in-out; 
    animation: bounce 2.0s infinite ease-in-out; 
} 

.dot2 { 
    top: auto; 
    bottom: 0px; 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

@-webkit-keyframes rotate { 
    100% { 
    -webkit-transform: rotate(360deg) 
    } 
} 

@keyframes rotate { 
    100% { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg) 
    } 
} 

@-webkit-keyframes bounce { 
    0%, 100% { 
    -webkit-transform: scale(0.0) 
    } 
    50% { 
    -webkit-transform: scale(1.0) 
    } 
} 

@keyframes bounce { 
    0%, 100% { 
    transform: scale(0.0); 
    -webkit-transform: scale(0.0); 
    } 
    50% { 
    transform: scale(1.0); 
    -webkit-transform: scale(1.0); 
    } 
}

//search bar hander hesham 

$(function(){ 
    var searchField = $('#query'); 
    var icon = $('#search-btn'); 

    //focus handler 

    $(searchField).on('focus',function(){ 
     $(this).animate({ 
      width:'100%' 
     },400); 

     $(icon).animate({right:'10px'},400) 
    }); 

    //blur event 
    $(searchField).on('blur',function(){ 
     if(searchField.val()==''){ 
      $(searchField).animate({width:'45%'},400); 
      $(icon).animate({right:'360px'},400); 
     } 
    }); 
$('#search-form').submit(function(e){ 
    e.preventDefault(); 
}); 
}) 

function search(){ 
    // clear results 

    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 

    showSpinner(); 
    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 
       hideSpinner(); 

      } 
     ); 
} 

//next page function 

function nextPage(){ 

    var token = $('#next-button').data('token'); 
    var q = $('#next-button').data('query'); 
    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 

    showSpinner(); 
    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      pageToken: token, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 
       hideSpinner(); 

      } 
     ); 

} 

function prevPage(){ 

    var token = $('#prev-button').data('token'); 
    var q = $('#prev-button').data('query'); 
    $('#results').html(''); 
    $('buttons').html(''); 

    //get form input 
    q=$('#query').val(); 

    //run get reqeues on API 
showSpinner(); 
    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      pageToken: token, 
      type:'video', 
      key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'}, 
      function(data){ 
       var nextPageToken = data.nextPageToken; 
       var prevPageToken = data.prevPageToken; 
       console.log(data); 

       $.each(data.items, function(i, item){ 
        var output = getOutput(item); 

        // display results 
        $('#results').append(output); 
       }); 

       var buttons = getButtons(prevPageToken,nextPageToken); 

       //display buttons 

       $('#buttons').append(buttons); 
       hideSpinner(); 

      } 
     ); 

} 
/// build output 

function getOutput(item){ 

    var videoId = item.id.videoId; 
    var title = item.snippet.title; 
    var description = item.snippet.description; 
    var thumb = item.snippet.thumbnails.high.url; 
    var channelTitle = item.snippet.channelTitle; 
    var videoDate = item.snippet.publishedAt; 

    //build output string 

    var output = '<li>'+ 
    '<div class="list-left">'+ 
    '<img src="'+thumb+'">'+ 
    '</div>'+ 
    '<div class="list-right">'+ 
    '<h3>'+title+'</h3>'+ 
    '<small>By <span class="cTitle">'+channelTitle+'</span> On '+videoDate+'</small>'+ 
    '<p>'+description+'</p>'+ 
    '</div>'+ 
    '</li>'+ 
    '<div class="clearfix"></div>'+ 
    ''; 
return output; 
} 

//build the buttons 

function getButtons(prevPageToken,nextPageToken){ 
    if(!prevPageToken){ 
     var btnoutput = '<div class="button-container">'+ 
         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+ 
         'onclick="nextPage();">Next Page</button></div >'; 


    }else{ 
     var btnoutput = '<div class="button-container">'+ 
         '<button id="prev-button" class="paging-button" data-token="'+prevPageToken+'" data-query="'+q+'"'+ 
         'onclick="prevPage();">Previous Page</button>'+ 
         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+ 
         'onclick="nextPage();">Next Page</button></div >'; 
    } 

    return btnoutput; 
} 

function showSpinner() { 
    if($(".spinner").length == 0) { 
    $("body").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>"); 
    } 
    $(".backdrop").show(); 
} 

function hideSpinner() { 
    $(".backdrop").hide(); 
}

Quelle

2016-06-24 16:32:30

danke, es funktioniert für mich. Ich habe nur ein kleines Problem, dass nach dem Klicken auf die nächste Seite Schaltfläche duplizieren Taste bei jedem Klick auf nächste oder vorherige wie hier in diesem Bild: http://i.imgur.com/xw82lkP.png – Cwalavice

können Sie bitte dabei helfen:) http://i.imgur.com/xw82lkP.png – Cwalavice

Spinner laden in Youtube-Suchmaschine

Antwort

Verwandte Themen