Add a very basic PIN UI implementation that is shared between lock and settings.

chrome/browser/resources/chromeos/login/lock.js

Index: chrome/browser/resources/chromeos/login/lock.js
diff --git a/chrome/browser/resources/chromeos/login/lock.js b/chrome/browser/resources/chromeos/login/lock.js
index 9800faec319595ee3dc148d52b6662c405682dd0..89f3e1cb4bcdbc6617a68837287f68e33ed86d47 100644
--- a/chrome/browser/resources/chromeos/login/lock.js
+++ b/chrome/browser/resources/chromeos/login/lock.js
@@ -8,6 +8,34 @@
 
 <include src="login_shared.js">
 
+// Lazy load polymer.
+(function() {
+  'use strict';
+
+  // Register loader for custom elements.
+  cr.ui.login.ResourceLoader.registerAssets({
+    id: 'custom-elements',
+    html: [{ url: 'chrome://oobe/custom_elements.html' }]
+  });
+
+  // Called after polymer has been loaded. Fades the pin element in.
+  var onPolymerLoaded = function() {
+    var pinContainer = $('pin-container');
+    pinContainer.style.opacity = 1;
+  };
+
+  // We only load the PIN element when it is actually shown so that lock screen
+  // load times remain low when the user is not using a PIN.
+  //
+  // Loading the PIN element blocks the DOM, which will interrupt any running
+  // animations. We load the PIN after an idle notification to allow the pod
+  // fly-in animation to complete without interruption.
+  if (loadTimeData.getBoolean('showPin')) {
+    cr.ui.login.ResourceLoader.loadAssetsOnIdle('custom-elements',
+                                                onPolymerLoaded);
+  }
+})();
+
 cr.define('cr.ui.Oobe', function() {
   return {
     /**