Paper Spinner wie in Android

Ich habe versucht, den Spinner wie auf Android mit Paper Material und Paper Spinner von Polymer zu rekonstruieren. Aber es ist nie symmetrisch. Das ist, was ich tat: https://jsbin.com/ciqova/edit?html,console,output Paper Spinner wie in Android

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <!-- Polymer Imports --> 
 
    <base href="https://polygit.org/polymer+:master/components/"> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> 
 
    <link rel="import" href="paper-material/paper-material.html"> 
 
    <link rel="import" href="paper-spinner/paper-spinner.html"> 
 
    <!-- MDL Import --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <!-- JavaScript --> 
 
    <style is="custom-style" include="iron-flex iron-flex-alignment"> 
 
     .center { 
 
      @apply(--layout-horizontal); 
 
      @apply(--layout-center-justified); 
 
     } 
 

 
     paper-material.round { 
 
      border-radius: 50%; 
 
      height: 34px; 
 
      width: 36px; 
 
     } 
 
     
 
     paper-spinner.size { 
 
      height: 30px; 
 
      width: 30px; 
 
     } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="center"> 
 
    <paper-material elevation="5" class="round size"> 
 
     <div class="center"> 
 
     <paper-spinner class="size" active></paper-spinner> 
 
     </div> 
 
    </paper-material> 
 
    
 
    </div> 
 
</body> 
 

 
</html>

Ich hoffe, dass Sie mir helfen könnte. Ich meine dies Spinner: https://www.google.com/design/spec/components/progress-activity.html#progress-activity-behavior Schau unter Verhalten das erste Video.

Nils

Quelle

2016-04-12 Nils Bergmann

Willkommen bei Stackoverflow. Bitte fügen Sie die relevanten Informationen direkt zur Frage hinzu, anstatt nur auf externe Ressourcen zu verlinken. –

Die Asymmetrie durch die Abmessungen des Spinners Behälter (.round) verursacht wird, wobei seine Breite 2px größer war vielleicht habe als seine Höhe. (? Ein Tippfehler)

paper-material.round { 
    border-radius: 50%; 
    height: 34px; 
    width: 36px; // width !== height --> asymmetry 
}

Auch sah der Behälter ein wenig eng um den Spinner und war dringend padding:

paper-material.round { 
    border-radius: 50%; 
    height: 34px; 
    width: 34px; // width === height 
    padding: 10px; // give spinner some breathing room 
}

Auch mit diesen Änderungen, die Spinner sah leicht aus der Mitte mir:

... so stieß ich es mit padding-top nach unten.

paper-spinner.size { 
    height: 30px; 
    width: 30px; 
    padding-top: 1px; 
}

Hier ist der jsbin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <!-- Polymer Imports --> 
 
    <base href="https://polygit.org/polymer+:master/components/"> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> 
 
    <link rel="import" href="paper-material/paper-material.html"> 
 
    <link rel="import" href="paper-spinner/paper-spinner.html"> 
 
    <!-- MDL Import --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <!-- JavaScript --> 
 
    <style is="custom-style" include="iron-flex iron-flex-alignment"> 
 
     .center { 
 
      @apply(--layout-horizontal); 
 
      @apply(--layout-center-justified); 
 
     } 
 

 
     paper-material.round { 
 
      border-radius: 50%; 
 
      height: 34px; 
 
      width: 34px; 
 
      padding: 10px; 
 
     } 
 
     
 
     paper-spinner.size { 
 
      height: 30px; 
 
      width: 30px; 
 
      padding-top: 1px; 
 
     } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="center"> 
 
    <paper-material elevation="5" class="round size"> 
 
     <div class="center"> 
 
     <paper-spinner class="size" active></paper-spinner> 
 
     </div> 
 
    </paper-material> 
 
    
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-04-12 13:06:21

Großartig es funktioniert! Danke dafür ! –

Antwort

Verwandte Themen