画像が中央にあるCSSローダー

Question

私はローダーの次のコードを持っていますが、w3schoolでも同じです。

CSS：

#loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    z-index: 1; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

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

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

/* Add animation to "page content" */ 
.animate-bottom { 
    position: relative; 
    -webkit-animation-name: animatebottom; 
    -webkit-animation-duration: 1s; 
    animation-name: animatebottom; 
    animation-duration: 1s 
} 

@-webkit-keyframes animatebottom { 
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 } 
} 

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 } 
} 

しかし、私はイメージを置く場合は、CSSアニメーションのような画像スピンが、私はローダーの中央に画像をしたいです。

別のdivで背景画像を使用していません。

これは#loader_upload2からBorderプロパティを削除し、そこbackgroundを追加私のfiddle

Answer 1

です。

Your Working Fiddle

#loader_upload2 { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    z-index: 1; 
    width: 190px; 
    height: 190px; 
    margin: -75px 0 0 -75px; 

    border-radius: 50%; 

    width: 140px; 
    height: 140px; 
background: url('https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg'); 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

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

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

/* Add animation to "page content" */ 
.animate-bottom { 
    position: relative; 
    -webkit-animation-name: animatebottom; 
    -webkit-animation-duration: 1s; 
    animation-name: animatebottom; 
    animation-duration: 1s 
} 

@-webkit-keyframes animatebottom { 
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 } 
} 

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 } 
} 

Answer 2

この

<div id="loader_upload2"> 

     </div> 
     <div id="image"> 

     </div> 

CSS

#image{ 
background: url(https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg) no-repeat; 
    z-index: 99999; 
    display: inline-block; 
    background-size: 100% 100%; 
    width: 90px; 
    height: 90px; 
    position: absolute; 
    top: 45%; 
    lefT: 50%; 
    margin-left: -36px; 

} 
#loader_upload2 { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    z-index: 1; 
    width: 190px; 
    height: 190px; 
    margin: -75px 0 0 -75px; 
    border: 16px solid #808080; 
    border-radius: 50%; 
    border-top: 16px solid #85C440; 
    width: 140px; 
    height: 140px; 

    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

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

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

/* Add animation to "page content" */ 
.animate-bottom { 
    position: relative; 
    -webkit-animation-name: animatebottom; 
    -webkit-animation-duration: 1s; 
    animation-name: animatebottom; 
    animation-duration: 1s 
} 

@-webkit-keyframes animatebottom { 
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 } 
} 

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 } 
} 

デモしてみてください：私が間違っmの場合https://fiddle.jshell.net/mhrjnsa1/pcgfo8mx/13/